CODEWITHSUNDEEP
javascriptjqueryhtmlcss
emjay
emjay

Reputation: 1511

hide / close (next) div on click but have the possibility to show multiple divs

i have some contact boxes with some contact details and I wan't to show / hide those details on click. I got this working fine, but I need one little addition. I need to keep all divs open, until i click on the corresponding button.

So if Someone clicks on button 1, div 1 should be visible. If someone clicks on button 2, div 1 and div 2 are visibile. If someone clicks on a button which div is already visible, this div should be closed again.

Here is my Code:

  $("div.details").each(function(){
       $(this).hide();
  });

  $('div.open').on( "click", function(e) {
      e.preventDefault();
      var id = $(this).next().attr('id');
      $("div.details").each(function(){
          $(this).hide();
          if($(this).attr('id') == id) {
            $(this).show();
          }
      });
  });
div.contact {
  background-color: #ccc;
}

div.open {
  cursor: pointer;
  border: 1px solid black;
}
div.open:hover {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="contactBoxes">
	<div class="contact">
	  <h3>Contact Name 1</h3>
	  <div class="open"><span>Contact Me</span></div>
      <div class="details" id="1"><p>Contact Details</p></div>
    </div>
	<div class="contact">
	  <h3>Contact Name 2</h3>
	  <div class="open"><span>Contact Me</span></div>
      <div class="details" id="2"><p>Contact Details</p></div>
    </div>
	<div class="contact">
	  <h3>Contact Name 3</h3>
	  <div class="open"><span>Contact Me</span></div>
      <div class="details" id="3"><p>Contact Details</p></div>
    </div>
  </div>

I used ID'S just to find the associated div. If someone has a solution without ID's i would prefer this solution. :)

I hope someone can give me a hint, how to solve this problem.

Thanks!

Upvotes: 1

Views: 1195

Answers (3)

JuaRoAl
JuaRoAl

Reputation: 201

This is an oprtion:

$("div.details").each(function(){
       $(this).hide();
  });

  $('div.open').on( "click", function(e) {

      var id = $(this).next().attr('id');
      $("#"+id).slideToggle()
  });

Upvotes: 0

Sanjay Gohil
Sanjay Gohil

Reputation: 144

try this and remove all ids

$('div.open').on( "click", function(e) {
  $(this).next().show()
}
$('buttonhide').on( "click", function(e) {
  $('.details').next().show()
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

In that case you can just toggle the the next sibling of the clicked element

$('div.open').on("click", function(e) {
  e.preventDefault();
  //toggle the next element
  $(this).next().toggle()
});
div.contact {
  background-color: #ccc;
}
div.open {
  cursor: pointer;
  border: 1px solid black;
}
div.open:hover {
  color: blue;
}
/*hide details at the start*/

div.details {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contactBoxes">
    <div class="contact">
        <h3>Contact Name 1</h3>
        <div class="open"><span>Contact Me</span></div>
        <div class="details" id="1"><p>Contact Details</p></div>
    </div>
    <div class="contact">
        <h3>Contact Name 2</h3>
        <div class="open"><span>Contact Me</span></div>
        <div class="details" id="2"><p>Contact Details</p></div>
    </div>
    <div class="contact">
        <h3>Contact Name 3</h3>
        <div class="open"><span>Contact Me</span></div>
        <div class="details" id="3"><p>Contact Details</p></div>
    </div>
</div>

Upvotes: 1

Related Questions