CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Techie
Techie

Reputation: 73

jQuery show / hide multiple divs

I need help in expand/collapse div using jQuery. Here is the problem.

I have an HTML page showing car names and their description as shown below.

  1. When the user clicks on any carTitle div, corresponding carDetail div should be expanded (if already collapsed). When the user clicks on that div again, the corresponding carDetail div should be collapsed.

  2. Initially, carToyota div should be expanded on pageLoad, and other divs are collapsed

  3. User can keep multiple divs expanded at the same time

var collapsed = false;

$(".carTitle").on('click', function(e) {
  collapsed = !collapsed;
  var carDetailsDiv = $(event.currentTarget).next();

  if (collapsed == true) {
    $(carDetailsDiv).hide();
  } else {
    $(carDetailsDiv).show();
  }

  event.preventDefault();
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

The above code does not work as expected. Can anybody help??

Upvotes: 0

Views: 795

Answers (3)

Shiny
Shiny

Reputation: 5055

Define your own class called collapsed, and set it to display: none

collapsed {
  display: none;
}

Then, you can use jQuery's .toggleClass() to toggle this class, while also being able to simply add the class to the carDetails divs to hide them by default

Finally, you can use $(this).next(), rather than event.currentTarget.next()

Here's the Demo:

$(".carTitle").on('click', function(e) {
  $(this).next().toggleClass('collapsed');
});
.collapsed {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

Upvotes: 3

alpesh solanki
alpesh solanki

Reputation: 21

var collapsed = false;

$(".carTitle").on('click', function(e) {
  collapsed = !collapsed;
  var carDetailsDiv = $(event.currentTarget).next();

  $(this).siblings('.carDetails').toggleClass('show');

  event.preventDefault();
  return false;
});
.carDetails {display:none;}
.show {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails show">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

Try this one i have using toggle class in your description div ....

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

By default keep all .carDetails div as hidden.

Keep open class on first car div.

Remove/Add .open class on the carDetails that is clicked.

$(".carTitle").on('click', function(e) {
  var carDetailsDiv = $(event.currentTarget).next();
  if ($(carDetailsDiv).hasClass('open')) {
    $(carDetailsDiv).removeClass('open');
  } else {
    $(carDetailsDiv).addClass('open');
  }

  event.preventDefault();
  return false;
});
.carDetails {
  display: none;
}

.carDetails.open {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails open">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

Upvotes: 0

Related Questions