Close CSS Accordion when Clicked

Question

Close CSS Accordion when Clicked

I have a CSS accordion that I would like to close each panel upon clicking. Can this be accomplished using only CSS, or will JavaScript need to be added?

#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>

javascript html css

Answer 1

Answer №1

In reference to my previous comment: If the requirement is to enable the deselection of an item by clicking on it, switching from radio buttons to checkboxes is necessary. However, this switch allows for multiple panels to remain open. To achieve the functionality of automatically closing other panels when a new one is opened and closing the open panel upon clicking it again, some amount of JavaScript is required.

Below is your code with two minor adjustments:

Changed from radio buttons to checkboxes.
Added a small jQuery snippet that implements the "accordion" behavior of closing other panels when one 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

In reference to my previous comment: If the requirement is to enable the deselection of an item by clicking on it, switching from radio buttons to checkboxes is necessary. However, this switch allows for multiple panels to remain open. To achieve the functionality of automatically closing other panels when a new one is opened and closing the open panel upon clicking it again, some amount of JavaScript is required.

Below is your code with two minor adjustments:

Changed from radio buttons to checkboxes.
Added a small jQuery snippet that implements the "accordion" behavior of closing other panels when one 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 3

Answer №2

To achieve this functionality, you'll need to utilize JavaScript. Begin by creating a button with the ID 'close'.

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

With the above code, the element will be hidden using JavaScript. Alternatively, you can use the following code snippet:

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

Here, 'hidden' is defined as:

hidden: display: none;

Answer 4

To achieve this functionality, you'll need to utilize JavaScript. Begin by creating a button with the ID 'close'.

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

With the above code, the element will be hidden using JavaScript. Alternatively, you can use the following code snippet:

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

Here, 'hidden' is defined as:

hidden: display: none;

Answer 5

Answer №3

This method may not look visually appealing, but it achieves the desired functionality without the need for JavaScript.

By utilizing standard links and the :target pseudo class, you can achieve the desired accordion effect.

To implement this, link to the li element containing the target accordion item. Then, display the item while toggling the open and close links accordingly.

Although this method works, personally, I would opt for a more straightforward JavaScript solution.

/*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>

Answer 6

This method may not look visually appealing, but it achieves the desired functionality without the need for JavaScript.

By utilizing standard links and the :target pseudo class, you can achieve the desired accordion effect.

To implement this, link to the li element containing the target accordion item. Then, display the item while toggling the open and close links accordingly.

Although this method works, personally, I would opt for a more straightforward JavaScript solution.

/*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>

Close CSS Accordion when Clicked

Answer №1

Answer №2

Answer №3

Similar questions

What causes the error message 'avoid pushing route with duplicate key' when using NavigationStateUtils in React Native?

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2

What is the best way to keep the textfield value at 0? If you clear the textfield, it will result in another value being

Customizing the size of dateBox icons in JQuery Mobile

Exploring jQuery Mobile - What Causes an Empty State?

What factors influence Redux in determining when to update the user interface?

Tips on creating a responsive div element within the viewport?

When switching back to the parent window and attempting to execute an action, a JavaScript error is encountered

Generating HTML tables with charts using FireFox

Unable to correctly declare and display UTF-8 character within JSON syntax

Using the HTML <span> and svg elements together does not allow them to be inline with each other

Ensure that the form is submitted only after confirming it in the modal with react-hook-form

jsp fullcalendar select not functioning properly

Adjust div height to match the dynamic height of an image using jQuery

How can we avoid excessive re-rendering of a child component in React when making changes to the parent's state?

What could be the reason the background-color isn't changing when I apply button:hover?

Tips for integrating CSS with Material UI TableContainer

Vuetify: How to restore the input value in v-text-field

SwiperJS continuously applies additional right margin to every slide

Is it possible to set all UI forms to a readonly/disable mode?