CSS Accordion Close On Click

Question

I have pure CSS accordion that I want each panel to close on click. Can I achieve this with CSS only or do I have to add JavaScript?

 #accordion input:not(:checked) + div { display: none; } #accordion input:checked + div { display: block; } #accordion input { width: 0px; height: 0px; margin: 0px; opacity: 0.0; } #accordion label { cursor: pointer; display: inline-block; width: 750px; background: #ffffff; color: #ff6600; font-family: open sans; border: 1px solid #ff6600; font-size: 24px; padding: 25px 20px; margin: 0px; } #accordion div { width: 750px; background: white; border: 1px solid gray; padding: 15px 20px; } #accordion li { list-style: none; } div.scroll { max-height: 1050px; overflow: auto; } .timely-stream:not(.timely-agenda) .timely-event { min-height:92px; !important }

 <ul id="accordion"> <li> <label for="section-1-checkbox">OneHockey</label> <input id="section-1-checkbox" type="radio" name="accordion-level-1" /> <div><a href="https://imgur.com/HJwXuym"><img src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" title="source: imgur.com" /></a></div> </li> <li> <label for="section-2-checkbox">TOURNAMENTS</label> <input id="section-2-checkbox" type="radio" name="accordion-level-1" /> <div class="scroll"> <script src="//dashboard.time.ly/js/embed.js" data- src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script> </div> </li> <li> <label for="section-3-checkbox">INFO</label> <input id="section-3-checkbox" type="radio" name="accordion-level-1" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> <li> <label for="section-4-checkbox">STANDINGS/SCHEDULE</label> <input id="section-4-checkbox" type="radio" name="accordion-level-1" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> </ul>

Answer 1

Per my comment above: If you need to be able to deselect an item by clicking it, you'll need to switch from radio buttons to checkboxes. Which then results in permitting more than one panel being open. If you must have it automatically close other panels when a new one is open, and it must close the open panel if you click on it again, then you'll need at least a little javascript.

So, the below is your code, with two minor modifications:

1. I've changed from radio buttons to checkboxes.
2. I've added a tiny jQuery snippet that enforces the "accordion" method of closing other panels when a panel is opened.

 jQuery(function($) { $('input[type="checkbox"]').on('change', function() { let state = $(this).is(':checked'); $('input[type="checkbox"]').prop('checked', false); $(this).prop('checked', state); }); });

 #accordion input:not(:checked)+div { display: none; } #accordion input:checked+div { display: block; } #accordion input { width: 0px; height: 0px; margin: 0px; opacity: 0.0; } #accordion label { cursor: pointer; display: inline-block; width: 750px; background: #ffffff; color: #ff6600; font-family: open sans; border: 1px solid #ff6600; font-size: 24px; padding: 25px 20px; margin: 0px; } #accordion div { width: 750px; background: white; border: 1px solid gray; padding: 15px 20px; } #accordion li { list-style: none; } div.scroll { max-height: 1050px; overflow: auto; } .timely-stream:not(.timely-agenda) .timely-event { min-height: 92px; !important }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="accordion"> <li> <label for="section-1-checkbox">OneHockey</label> <input id="section-1-checkbox" type="checkbox" name="accordion-level-1" /> <div> <a href="https://imgur.com/HJwXuym"><img src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" title="source: imgur.com" /></a> </div> </li> <li> <label for="section-2-checkbox">TOURNAMENTS</label> <input id="section-2-checkbox" type="checkbox" name="accordion-level-1" /> <div class="scroll"> </div> </li> <li> <label for="section-3-checkbox">INFO</label> <input id="section-3-checkbox" type="checkbox" name="accordion-level-1" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> <li> <label for="section-4-checkbox">STANDINGS/SCHEDULE</label> <input id="section-4-checkbox" type="checkbox" name="accordion-level-1" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> </ul>

Answer 2

you will need to use JS. create a button with a ID 'close'

jQuery(function($) {
   $( "#close" ).click(function() {
       $( "#target" ).toggle();
    });
});

this will hide it via JS or use

jQuery(function($) {
    $( "#close" ).click(function() {
         $( "#target" ).addClass('hidden');
     });
});

hidden would be defined as: hidden: display: none;

Answer 3

This is ugly but it gives you exactly what you want with no JavaScript.

You can use standard links and the :target pseudo class .

Link to the li which contains the target accordion item. Then display the item and toggle the open and close links

Personally, I'd go with a simple javascript enhanced option.

 /*Hide child div*/ #accordion li > div { display: none; } #accordion li a.close { display: none; } /*Display target div*/ #accordion li:target > div { display: block; } /*Toggle open and close links*/ #accordion li:target > a.open { display:none; } #accordion li:target > a.close { display:block; } #accordion a { cursor: pointer; display: inline-block; width: 750px; background: #ffffff; color: #ff6600; font-family: open sans; border: 1px solid #ff6600; font-size: 24px; padding: 25px 20px; margin: 0px; text-decoration:none; } #accordion div { width: 750px; background: white; border: 1px solid gray; padding: 15px 20px; } #accordion li { list-style: none; } div.scroll { max-height: 1050px; overflow: auto; } .timely-stream:not(.timely-agenda) .timely-event { min-height:92px; !important }

 <ul id="accordion"> <li id="section1"> <a href="#section1" class="open">OneHockey</a> <a href="#" class="close">OneHockey</a> <div ><a href="https://imgur.com/HJwXuym"><img src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" title="source: imgur.com" /></a></div> </li> <li id="section2"> <a href="#section2" class="open">TOURNAMENTS</a> <a href="#" class="close" >TOURNAMENTS</a> <div class="scroll" > <script src="//dashboard.time.ly/js/embed.js" data- src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script> </div> </li> <li id="section3"> <a href="#section3" class="open">INFO</a> <a href="#" class="close">INFO</a> <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> <li id="section4"> <a href="#section4" class="open">STANDINGS/SCHEDULE</a> <a href="#" class="close">STANDINGS/SCHEDULE</a> <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> </ul>