CSS only accordion divs that are all opened by default with no need for jquery

Question

CSS only accordion divs that are all opened by default with no need for jquery

My current setup involves:

I would like to enable the functionality of having multiple accordion sections open simultaneously upon page load. This means that when one section is opened, the others should not close. Is there a way to achieve this without the use of javascript?

(Please disregard the sub accordions - I only require a single layer)

HTML

<ul class="accordion">
  <li id="one" class="files">
    <a href="#one">My Files<span>495</span></a>
    <ul class="sub-menu">
      <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
      <li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li>
      <li><a href="#one"><em>03</em>FTP Server<span>366</span></a></li>
        <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
        <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
    </ul>
  </li>
  <li id="two" class="mail">
    <a href="#two">Mail<span>26</span></a>
    <ul class="sub-menu">
      <li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li>
      <li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li>
      <li><a href="#two"><em>03</em>Gmail<span>3</span></a></li>
    </ul>
  </li>
  <li id="three" class="cloud">
    <a href="#three">Cloud<span>58</span></a>
    <ul class="sub-menu">
      <li><a href="#three"><em>01</em>Connect<span>12</span></a></li>
      <li><a href="#three"><em>02</em>Profiles<span>19</span></a></li>
      <li><a href="#three"><em>03</em>Options<span>27</span></a></li>
    </ul>
  </li>
  <li id="four" class="sign">
    <a href="#four">Sign Out</a>
    <ul class="sub-menu">
      <li><a href="#four"><em>01</em>Log Out</a></li>
      <li><a href="#four"><em>02</em>Delete Account</a></li>
      <li><a href="#four"><em>03</em>Freeze Account</a></li>
    </ul>
  </li>
</ul>

CSS

body {margin:50px;}

/* CSS Styles */
/* Add your CSS styles here */

I am trying to accomplish this without any java script. Do you have any suggestions on achieving this?

html css accordion

Answer 1

Answer №1

Unfortunately, achieving this functionality solely with CSS is not possible in this scenario. The CSS3 :target selector you are utilizing changes the target when another item is clicked, making it impossible to maintain the desired state.

While CSS cannot set state, it can style elements accordingly. If you wish to keep each section open after clicking, JavaScript is required. jQuery is not necessary for this task.

If JavaScript is preferred, the following code closely mimics the CSS behavior while allowing the accordions to remain open. Closure of the accordion can be done by clicking on the title once more.

var lists = document.querySelectorAll('.accordion > li > a'); // Retrieve list title links
for (var i = 0; i < lists.length; i++) { // Iterate through each list title link
  lists[i].href = "javascript:void()"; // Prevent page from jumping
  lists[i].onclick = function(e) { // Handle link click event
    var items = e.target.parentNode.querySelectorAll('li'); // Get sibling list items of clicked link
    for (var x = 0; x < items.length; x++) { // Iterate through each list item
      if (items[x].style.height != '33px') { // Check if item is not open
        items[x].style.height = '33px'; // Open item
      } else { // Otherwise
        items[x].style.height = '0px'; // Close item
      }
    }
  };
}

Wrap this code within a script tag and insert it at the end of the body or enclose it in

document.onload = function() {  /*  Script Here  */  }

Feel free to check out the Demo for a visual representation.

Note: Even though styles with the :target selector will no longer work, it is recommended to keep them in the CSS as a backup in case the user has JavaScript disabled.

Answer 2

Unfortunately, achieving this functionality solely with CSS is not possible in this scenario. The CSS3 :target selector you are utilizing changes the target when another item is clicked, making it impossible to maintain the desired state.

While CSS cannot set state, it can style elements accordingly. If you wish to keep each section open after clicking, JavaScript is required. jQuery is not necessary for this task.

If JavaScript is preferred, the following code closely mimics the CSS behavior while allowing the accordions to remain open. Closure of the accordion can be done by clicking on the title once more.

var lists = document.querySelectorAll('.accordion > li > a'); // Retrieve list title links
for (var i = 0; i < lists.length; i++) { // Iterate through each list title link
  lists[i].href = "javascript:void()"; // Prevent page from jumping
  lists[i].onclick = function(e) { // Handle link click event
    var items = e.target.parentNode.querySelectorAll('li'); // Get sibling list items of clicked link
    for (var x = 0; x < items.length; x++) { // Iterate through each list item
      if (items[x].style.height != '33px') { // Check if item is not open
        items[x].style.height = '33px'; // Open item
      } else { // Otherwise
        items[x].style.height = '0px'; // Close item
      }
    }
  };
}

Wrap this code within a script tag and insert it at the end of the body or enclose it in

document.onload = function() {  /*  Script Here  */  }

Feel free to check out the Demo for a visual representation.

Note: Even though styles with the :target selector will no longer work, it is recommended to keep them in the CSS as a backup in case the user has JavaScript disabled.

Answer 3

Answer №2

This particular css code is currently displaying all of the accordions in a closed state by utilizing the following style:

    .accordion li > .sub-menu li {
      height: 0px;
    }

While it is possible to adjust the height to 33px to display all accordions as open when the page loads, this adjustment would disrupt the functionality. This is because the :target selector is responsible for setting the height dynamically, allowing the selected section to appear open.

Therefore, the most viable solution would be to incorporate javascript into the implementation....

Answer 4

This particular css code is currently displaying all of the accordions in a closed state by utilizing the following style:

    .accordion li > .sub-menu li {
      height: 0px;
    }

While it is possible to adjust the height to 33px to display all accordions as open when the page loads, this adjustment would disrupt the functionality. This is because the :target selector is responsible for setting the height dynamically, allowing the selected section to appear open.

Therefore, the most viable solution would be to incorporate javascript into the implementation....

Answer 5

Answer №3

Is it achievable? Absolutely

Is it necessary to modify your HTML? Definitely

Is it aesthetically pleasing? Not really

Instead of Target maintaining its state, utilize a checkbox to replace your top-level a tags with label.

body {margin:50px;}
/* Reset */
.accordion,
.accordion ul,
.accordion li,
.accordion label,
.accordion span {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
.accordion li {
  list-style: none;
}... (CSS code continues)
... (HTML code continues)

No need for Javascript!

Answer 6

Is it achievable? Absolutely

Is it necessary to modify your HTML? Definitely

Is it aesthetically pleasing? Not really

Instead of Target maintaining its state, utilize a checkbox to replace your top-level a tags with label.

body {margin:50px;}
/* Reset */
.accordion,
.accordion ul,
.accordion li,
.accordion label,
.accordion span {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
.accordion li {
  list-style: none;
}... (CSS code continues)
... (HTML code continues)

No need for Javascript!

CSS only accordion divs that are all opened by default with no need for jquery

Answer №1

Answer №2

Answer №3

Similar questions

Guide to transforming plain text into HTML format using Angular 4

Tips for positioning fixed column headers at the bottom of the header row

What's causing the text not to wrap when using float?

CanvasJS with a see-through background

What is the solution to the error message "cannot find specified file or directory, lstat 'scss/'"?

Modify the background color of the entire page when the main div is clicked

Prevent scrolling on both md-sidenav and md-content in AngularJS Material

Arrange divs in a stack when one becomes too full

What is the best way to split an array into smaller chunks?

Troubleshooting: Issues with AngularJS Data Binding in HTML Tables

The animation for the Bootstrap modal is not functioning correctly

Clashing CSS Styles: Font Size Edition

The JavascriptExecutor is unable to access the 'removeAttribute' property of a null object

Pondering in AngularJS - what is the best way to alter the DOM during an AJAX call?

Bootstrap doesn't display in the dropdown menu

Combining several markdown files into a unified HTML document

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

Top-notch tools and guides for front-end web development

Creating an HTML table from JSON data