Build a FAQ Accordion Menu | How to Create FAQ Accordion Menu Tabs | HTML5, CSS3 & jQuery

Build a FAQ Accordion Menu | How to Create FAQ Accordion Menu Tabs | HTML5, CSS3 & jQuery

tanzTalks.tech

4 года назад

3,139 Просмотров

This video will teach you how to build an accordian menu using jQuery (JavaScript library). We will use some basic HTML, CSS, and jQuery.

No dependencies are used in this tutorial. No Vue or Angular or React. We write it all by scratch and we make sure you understand why each line of code exists.

This is a basic accordion menu like those you often find on Frequently Asked Questions pages. It is surprisingly easy to build using HTML5, CSS3 and jQuery (JavaScript). We will start by building a basic menu, and then enhancing it with a few animations and icons to further enhance its interactive elements.

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

If you are looking to build accordion without even using jQuery, then you can follow another video:
https://youtu.be/w2LwkHNv910


SCREENSHOTS: https://drive.google.com/open?id=1dA4GHBro-ahC4gqxMAFmURD8RhAhK-Wr


Follow me on Facebook: https://fb.me/tanztalks.tech
Join our Facebook Group and Post your Problems: https://www.facebook.com/groups/1199763656835372/

Please take a moment to like and comment on my video. It helps me stay motivated! :)

-----------------------------------------------------------------------------------------------------------------

If you are interested in learning about Web Design. Check out these playlist

Restaurant Theme Responsive HTML/CSS Website:
https://www.youtube.com/playlist?list=PLnisUReSm0-kdxFZ9A6IKfUH7Wu2qzj3J

CSS Tips and Tricks | CSS Animations and Effects:
https://www.youtube.com/playlist?list=PLnisUReSm0-nMk-6ujxyl4QBvm0Q0D3zi

Portfolio Theme Responsive Bootstrap Website:
https://www.youtube.com/playlist?list=PLnisUReSm0-nXCgnGW3D-A4irRWQKkY4F

Business Theme Responsive Animated Bootstrap Website:
https://www.youtube.com/playlist?list=PLnisUReSm0-kLEHlrDkw12syBQ7xjhtG2

Travel Theme Responsive HTML/CSS Website From Scratch:
https://www.youtube.com/playlist?list=PLnisUReSm0-l4YlWMhCpgdskikQkd8dPv

Website Creation Tutorials:
https://www.youtube.com/playlist?list=PLnisUReSm0-nOe1CzyS3jEGk2-F9fl9A2

Host a website on your computer without any hosting server or buying domain:
https://www.youtube.com/watch?v=VlRQ6l6FsY0

-----------------------------------------------------------------------------------------------------------------

Audience: Anyone with a basic knowledge of HTML and CSS

Follow Me on Facebook: https://fb.me/tanzTalks.tech

#Accordion #FAQAccordion #AccordionTabs #Menu #CSS #HTML #HTMLCSS #WebDesign #tanzTalkstech


Tags:
accordion css javascript tutorial code in jquery and others. FAQ accordions. Accordian and accordians. No frameworks with tanztalks.tech. Sublime text and atom text. Accordian tutorial code. Building accordion menu. Acordion video tutorial. No dependencies. Lightweight accordion menu.

Тэги:

#tanz #tanzTalks #tanzTalks.tech #html5 #html #css3 #css #JavaScript #jQuery #how_to_create #how_to_design #how_to_develop #menu #menus #tutorial #from_scratch #learn #types_of_menus #responsive #attractive #website_parts #website_sections #learn_css #website_components #jquery #accordion #hiding_text #sliding_text #hidden_tabs #hidden_content #sliding_content #hide_HTML_content #code #best #easy #framework #php #node.js #faq_accordion #toggle #accordions #frequently_asked_questions
Ссылки и html тэги не поддерживаются


Комментарии:

@nabinshrestha8628
@nabinshrestha8628 - 13.04.2020 09:36

sir how to put in blogger post

Ответить
@armaansingh3985
@armaansingh3985 - 15.11.2019 06:34

thats a rather better looking accordion than the basic ones.. thank uh

Ответить
@wrestling4entertainment666
@wrestling4entertainment666 - 14.11.2019 07:05

and also is it necessary to write the font family in css to define font awesome icons? when we define font awesome icons in html, we dont define font family for them but still work. whats the difference?

Ответить
@wrestling4entertainment666
@wrestling4entertainment666 - 14.11.2019 06:52

sir plz create a website for ur channel n make all d content easily accesible at one place n also explain about them. dat would help us a lot

Ответить