jQuery Toggles, and sometimes called Accordions, are great for Grouping content, hiding non active content or adding an awesome Frequently Asked Questions section to your website. This tutorial can be adapted to any website design and also works in an iweb snippet. It requires the jQuery library, a “few” lines of CSS and HTML.
Step 1: Include The necessary JS
First make sure jQuery is available from your website. Next, we need to build our custom JS script to activate the toggle.
Step 2: Add the CSS to style the toggle
Here is where we can get creative by adding our custom CSS to the toggle. The css below are the basics. But you can stylize the toggle in many ways such as gradient backgrounds, box shadows, rounded corners and more.
Step 3: Create the HTML for the toggle’s content
Finally, lets add our HTML markup to utilize the JS and CSS we made above. We’re just going to create two basic toggles with a title and a paragraph of text for each one.
Each toggle is wrapped in a main div
toggle followed by the toggle link and then the main content with the div
toggle-content. If you include all the above, you should have a working toggle. Then all you need to do is add your content and style the toggle further within the CSS.