jQuery show / hide multiple divs

Related searches

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>

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>

Show/Hide Multiple Divs with Jquery, <div class="moreinfo>The rows which i wanna to be hide/show at clicking. </div>. </div>. Needs a css style with "display:none" for .moreinfo? The jQuery is hooking onto these classes to show and hide the various wrappers depending on what heading is being hovered on. This example is for wrapper one. It targets the.hoverReveal1 class that then runs the function to show wrapper one but hide wrappers two and three. This code is then replicated two more times to target the other wrappers.

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>

Show/hide multiple divs, Each row also has a unique and common class. Little bit of CSS .row { display: none; }. div/content rows initially start hidden. This is the jQuery Hi there everyone im new to the forum and quite new to jquery i have a liitle issue with trying to hide / show multiple divs on my page. I am using a class

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>

Use jQuery SlideToggle to Show/Hide Multiple Rows or Divs, Hello! I'm trying to make my own page, and i think it would be nice to do some boxes with infos about beads. Here, i wanna show the title and clicking

Show/Hide Multiple Divs with Jquery, $ (".divClass"). hide (); So each button can do: $ (".divClass"). hide $ ("#specificDiv"). show (); You can make this more generic, and use the obvious convention - the button and the div with the same number in the id are related. So:

You could have the hide/show divs inside a container, and then on .ready hide all its immediate children; You could then target all a.close inside this container, and on click hide the clicked anchor's grand-grandparent; And finally target all anchors inside the items list, and on click show the div corresponding to the anchor's rel;

You can show/hide an entire div by giving it a class of "toggle". Links and other child elements will work fine too. The element directly before this one is a heading, so it gets a show/hide link appended.

Comments
  • .toggleClass() is the cleaner solution
  • No worries, glad I could help. Also, if this answer has helped you, could you mark it as accepted - This will reward both you and I with some reputation, and will mark your question as solved. How does accepting an answer work