Accordion Scripts / Code

CSS Accordion (No JavaScript) : Works both on AMP and Non-AMP pages

These accordions require only CSS for functioning and work both on AMP and non-AMP pages without any JavaScript or AMP script. Each accordion is independent of other accordions on the page and you are required to give a unique id to each accordion.

Demo of CSS Accordion

Accordion 1 (Content visible on page load)



Accordion 2 (Content hidden on page load)

I am content of Accordion 2.

Accordion 3 (Content visible on page load)



Accordion 4 (Content hidden on page load)

I am content of Accordion 4.

Accordion Code

<style>.expanded,.hidden{display:none}label{display:inline-block;width:100%;padding:5px 10px;background:#ddd;border:1px solid #ccc;font-weight:bold}label:hover{background:#eee} .expanded +*{display:block}.expanded:checked +*{display:none} .hidden +*{display:none}.hidden:checked +*{display:block}}</style> HTML of Accordions shown in Demo: <label for=acc1>Accordion 1 (Content visible on page load)</label><input id=acc1 type=checkbox class=expanded > <div>I am content of Accordion 1.</div><br><br><br><br> <label for=acc2>Accordion 2 (Content hidden on page load)</label><input id=acc2 type=checkbox class=hidden > <p>I am content of Accordion 2.</p><br><br><br><br> <label for=acc3>Accordion 3 (Content visible on page load)</label><input id=acc3 type=checkbox class=expanded /> <div><table><col class=w50><tr><td>I am content of Accordion 4.<td>I am content of Accordion 4. <tr><td>I am content of Accordion 4.<td>I am content of Accordion 4. <tr><td>I am content of Accordion 4.<td>I am content of Accordion 4. <tr><td>I am content of Accordion 4.<td>I am content of Accordion 4.</table></div><br><br><br><br> <label for=acc4>Accordion 4 (Content hidden on page load)</label><input id=acc4 type=checkbox class=hidden > <p>I am content of Accordion 4.</p><br><br><br><br>

Accordion Type B : Requirement CSS and JQuery

• Each accordion is independent of other accordions on the page.
• Accordion and its container can be any HTML element.
• The script inserts triangle on page load with direction as per the visibility of accordion content element set and also adds title attribute 'Click / Tap to Show / Hide Content'.
• On click / tap on accordion, the script hides / shows its content and changes direction of triangle.

Demo of Accordion Type B

Accordion 1 (Content visible on page load)

Accordion 2 (Content hidden on page load)

I am content of Accordion 2. I was hidden on page load.

I am content of Accordion 3.

Accordion Code

<style> /* For accordion and span containing up / down triangle */ .acc1,.acc2{width:100%;font-size:100%;font-weight:400;background:#00f;color:#fff;margin:20px 0 0 0;padding:5px 10px;cursor:pointer;} .triangle1 {float:right} /* For accordion content elements */ .acc1 + * {padding:5px 10px;margin:0;border:1px solid #00f} </style> <script>jQuery(function(){ //function to insert a span with class 'triangle1' in each accordion containing up or down triangle. jQuery.each(jQuery('.acc1'),function(){jQuery(this).prepend('<span class=triangle1 ></span>');jQuery(this).attr('title','Click / Tap to Show / Hide Content'); //function to change the triangle as per the visibility of content set on page load. if(jQuery(this).next().css('display')=='block'){jQuery(this).children('.triangle1').html('▲');} else {jQuery(this).children('.triangle1').html('▼');}}); //function to show hide content of accordion and change direction of triangle on click. jQuery('.acc1').bind('click',function(){if(jQuery(this).next().css('display')=='none'){jQuery(this).next().slideDown();jQuery('.trangle1',this).html('▲');} else {jQuery(this).next().slideUp();jQuery('.triangle1',this).html('▼');}}); }) </script> HTML of Accordions shown in Demo: <h3 class=acc1>Accordion 1 (Content visible on page load)</h3> <div>I am content of Accordion 1.</div> <p class=acc1>Accordion 2 (Content Hidden on page load)</p> <p style=display:none>I am content of Accordion 2. I was hidden on page load.</p> <div class=acc1>Accordion 3 (Content visible on page load)</div> <p>I am content of Accordion 3.</p>

Accordion Type C : Requirement CSS and JQuery

• On page load first accordion's content is visible and other accordions' content is hidden.
• Accordion and its container can be any HTML element.
• The script inserts triangle on page load with direction as per the visibility of accordion content element set and also adds title attribute 'Click / Tap to Show / Hide Content'..
• If the content of accordion is visible, on click / tap on accordion the script hides its content and changes direction of triangle.
• If the content of accordion is hidden, on click / tap on accordion the script makes its content visible and hides content of other accordion and changes direction of triangle of that accordion.
• The content of only one accordion is visible at a time.

Demo of Accordion Type C

Accordion 1 (Content visible on page load)

Accordion 2 (Content hidden on page load)

I am content of Accordion 2.

I am content of Accordion 3.

<style> /* For accordion and span containing up / down triangle */ .acc1,.acc2{width:100%;font-size:100%;font-weight:400;background:#f00;color:#fff;margin:20px 0 0 0;padding:5px 10px;cursor:pointer;} .triangle2 {float:right} /* For accordion content elements */ .acc2 + * {padding:5px 10px;margin:0;border:1px solid #f00} </style> <script>jQuery(function(){ //function to insert a span with class 'triangle1' in each accordion containing up or down triangle. jQuery.each(jQuery('.acc2'),function(){jQuery(this).prepend('<span class=triangle2 ></span>');jQuery(this).attr('title','Click / Tap to Show / Hide Content'); //function to make the content of first accordion visible, hide content of other accordions and change direction of triangles. jQuery('.acc2').next().css('display','none');jQuery('.triangle2').html('▼');jQuery('.acc2').first().next().css('display','block');jQuery('.triangle2').first().html('▲');}) //function to show hide content of accordion and change direction of triangle on click. jQuery('.acc2').bind('click',function(){if(jQuery(this).next().css('display')=='none'){jQuery('.acc2').next().hide();jQuery(this).next().slideDown();jQuery('.triangle2',this).html('▲');} else {jQuery(this).next().slideUp();jQuery('.triangle2',this).html('▼');}}); })</script> HTML of Accordions shown in Demo: <h3 class=acc2>Accordion 1</h3> <div>I am content of Accordion 1.</div> <p class=acc2>Accordion 2</p> <p class=dn>I am content of Accordion 2.</p> <div class=acc2>Accordion 3</div> <p>I am content of Accordion 3.</p>