Using div elements with a data attribute labeled as title in order to implement an accordion feature

Question

Using div elements with a data attribute labeled as title in order to implement an accordion feature

Here is the structure I am working with to display titles before the corresponding div with data-attribute.

I am aiming to achieve this layout:

1st Title

2nd Title

3rd Title

4th Title

When "1st Title" is clicked, the layout should transform into:

1st Title

First Content

2nd Title

3rd Title

4th Title

My question is, is there a way to implement this accordion functionality without altering the existing HTML structure (which consists of ul, li elements followed by the content divs)?

ul {
  display:none;
  }

div:before {
  content:attr(data-title);
  display:block;
  font-size:14px;
  background:gray;
  text-align:center;
  line-height:14px
  }
  
div {
  background:lightgray;
  }

<ul>
    <li id="first">1st Header</li>
    <li id="second">2nd Header</li>
    <li id="third">3rd Header</li>
    <li id="fourth">4th header</li>
</ul>
<div id="first_div" data-title="1st Header title">First content <br/>1111111111111111111111</div>
<div id="second_div" data-title="2nd Header title">Second content <br/>22222222222222222222</div>
<div id="third_div" data-title="3rd Header title">Third content <br/>33333333333333333333</div>
<div id="fourth_div" data-title="4th Header title">Fourth content <br/>4444444444444444444</div>

jquery html css accordion

Answer 1

Answer №1

Here is a solution that may be of assistance:

$('li').click(function(){
  if($(this).find('div.content').length == 0){
    $(this).append('<div class="content">' + $('#' + $(this).attr('id') + '_div').html() + '</div>');
    $('li').each(function(){
    if($(this).find('div.content').length != 0)
      $(this).find('div.content').slideUp();
    });
    $(this).find('div.content').slideDown();
  } else {
    if($(this).find('div.content').css('display') == 'block'){
      $(this).find('div.content').slideUp();
    } else {
      $(this).find('div.content').slideDown();
    }
  }
  
});

li {
 list-style: none;
}

div:before {
  content:attr(data-title);
  display:block;
  font-size:14px;
  background:gray;
  text-align:center;
  line-height:14px
  }
  
div {
  background:lightgray;
  }
  
.content{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="first">1st Header</li>
  <li id="second">2nd Header</li>
  <li id="third">3rd Header</li>
  <li id="fourth">4th header</li>
</ul>
<div class="content" id="first_div" data-title="1st Header title">First content <br/>1111111111111111111111</div>
<div class="content" id="second_div" data-title="2nd Header title">Second content <br/>22222222222222222222</div>
<div class="content" id="third_div" data-title="3rd Header title">Third content <br/>33333333333333333333</div>
<div class="content" id="fourth_div" data-title="4th Header title">Fourth content <br/>4444444444444444444</div>

Hopefully, this solution proves useful for you.

Answer 2

Here is a solution that may be of assistance:

$('li').click(function(){
  if($(this).find('div.content').length == 0){
    $(this).append('<div class="content">' + $('#' + $(this).attr('id') + '_div').html() + '</div>');
    $('li').each(function(){
    if($(this).find('div.content').length != 0)
      $(this).find('div.content').slideUp();
    });
    $(this).find('div.content').slideDown();
  } else {
    if($(this).find('div.content').css('display') == 'block'){
      $(this).find('div.content').slideUp();
    } else {
      $(this).find('div.content').slideDown();
    }
  }
  
});

li {
 list-style: none;
}

div:before {
  content:attr(data-title);
  display:block;
  font-size:14px;
  background:gray;
  text-align:center;
  line-height:14px
  }
  
div {
  background:lightgray;
  }
  
.content{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="first">1st Header</li>
  <li id="second">2nd Header</li>
  <li id="third">3rd Header</li>
  <li id="fourth">4th header</li>
</ul>
<div class="content" id="first_div" data-title="1st Header title">First content <br/>1111111111111111111111</div>
<div class="content" id="second_div" data-title="2nd Header title">Second content <br/>22222222222222222222</div>
<div class="content" id="third_div" data-title="3rd Header title">Third content <br/>33333333333333333333</div>
<div class="content" id="fourth_div" data-title="4th Header title">Fourth content <br/>4444444444444444444</div>

Hopefully, this solution proves useful for you.

Using div elements with a data attribute labeled as title in order to implement an accordion feature

Answer №1

Similar questions

Which is better to use: sql==true or sql===true?

What is the best way to create a placeholder for a select option with a looping value?

Having trouble with submitting a form using @submit in Vue 3

Obtain a collection of chosen dates from the availability scheduler

What could be causing the partial failure of my CSS stylesheet in my Django application? Could it be related to retrieving data from the database?

What about creating a PHP-MySQL voting platform?

Singling out a particular navigation tab

The event onmouseover triggers actions on elements contained within

"Modify hyperlink attributes to enhance security and optimize user experience

When $(.class) displays result, Javascript ceases execution

Struggling to receive accurate data from every statement

Altering webpage content through the use of Ajax

Verify if data is correct before refreshing user interface

What is the best location to store the JWT bearer token?

Prevent dragging of the div element that includes the "XYZ" class

The embed video is camouflaged within the bootstrap mobile display

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

What is the best way to transfer the string value parameter from a selected item in a dynamically populated dropdown list to a partial view controller in MVC 4?

Refreshing button labels in Rails utilizing ajax and jQuery

Maintain visibility of the vertical scroll bar while scrolling horizontally