CODEWITHSUNDEEP
javascriptjquerycsstoggleshow-hide
faty fatoumata
faty fatoumata

Reputation: 215

How can I hide all element when one is opened

How can I hide all others div when one is opened.

here is my JS part:

$(document).ready(function() {
  $(".flipone").click(function() {
    $(".one").slideToggle("fast");
  });

  $(".fliptwo").click(function() {
    $(".two").slideToggle("fast");
  });

  $(".flipthree").click(function() {
    $(".three").slideToggle("fast");
  });
});
.one,
.two,
.three {
  display: none;
  color: #282828;
}
.flipone,
.fliptwo,
.flipthree {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flipone">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="one">span1span1span1span1span1span1spa n1span1span1span1span1span1span1span1span1</div>
<div class="fliptwo">two</div>
<div style="margin:10px 0px 80px 0px;" class="two">span1span1span1span1span1span1span1span1 span1span1span1span1span1span1 span1</div>

<div class="flipthree">three</div>
<div style="margin-top:10px;" class="three">span1span1span1span1sp an1span1span1span1span1span1span1span1span1spa n1span1</div>

Upvotes: 0

Views: 210

Answers (5)

Upperface
Upperface

Reputation: 121

Give all your flip-divs a common class, for example: "flipper". With this one class you only need one function call in jquery. I added a data-parameter (mtarget) to get a link to your divs which you want to open and close.

To mark which one of your "mtarget-divs" is open add a class to them. For example: "flip-active".

Now if you click to slide down one div it gets marked active, if another one before was active (with class "flip-active") it should slide up.

See here example code:

<div class="flipper" data-mtarget="one">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" id="one">span1span1span1span1span1span1spa n1span1span1span1span1span1span1span1span1</div>
<div class="flipper" data-mtarget="two">two</div>
<div style="margin:10px 0px 80px 0px;" id="two">span1span1span1span1span1span1span1span1 span1span1span1span1span1span1 span1</div>

<div class="flipper" data-mtarget="three">three</div>
<div style="margin-top:10px;" id="three">span1span1span1span1sp an1span1span1span1span1span1span1span1span1spa n1span1</div>

   $(".flipper").click(function(){
      //is a flipper already active? Slide it up
      $('.flip-active').removeClass('flip-active').stop(true,true).slideUp();

      //find target div and add active class and slideDown
      $('#'+$(this).data('mtarget')).addClass('flip-active').stop(true,true).slideDown();
   });

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You do not need three separate handler. You can have one common class(say flip) for div flips and another common class(say flipnext) for all divs next to flipdivs:

MODIFIED DOM:

<div class="flip">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="flipnext">
    span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1 span1span1span1span1span1</div>
<div class="flip">two</div>
<div style="margin:10px 0px 80px 0px;" class="flipnext">
    span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1
</div>
<div class="flip">three</div>
<div style="margin-top:10px;" class="flipnext">
    span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1
</div>

MODIFIED CSS:

.flipnext { display: none; color:#282828;}
.flip { margin-top:10px; }

SCRIPT REQUIRED:

var filpnexts = $(".flipnext");
$(".flip").click(function(){
  var currentflipnext = $(this).next();
  filpnexts.not(currentflipnext).slideUp();
  currentflipnext.slideToggle("fast");
});

Working Demo

Upvotes: 0

Pete
Pete

Reputation: 58432

I would change your code to simplify it and make it more reusable by using common classes for your flip divs and info divs:

$(".flip").click(function() {
  var next = $(this).next();
  $('.info').not(next).slideUp('fast');
  next.slideToggle("fast");
});
.info {
  display: none;
  color: #282828;
}
.flip {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="info">span1span1span1span1span1span1sp an1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flip">two</div>
<div style="margin:10px 0px 80px 0px;" class="info">span1span1span1span1span1span1span1span1span1span1sp an1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flip">three</div>
<div style="margin-top:10px;" class="info">span1span1span1span1span1span1span1span1span1span1s pan1span1span1span1span1span1span1span1span1span1span1</div>

This looks like the functionality of an accordion - if you want a ready built one, you could use jquery ui accordion

Upvotes: 1

Marmik Bhatt
Marmik Bhatt

Reputation: 607

Using JQuery I think using $.each loop you can do that...

you need to add "filps" as class to all the flip divs...like these...

<div class="flipone flips">...</div>
<div class="fliptwo flips">...</div>
<div class="flipthree flips">...</div>

In Javascript you can use $.each loop function of JQuery to close all the divs except the one which is clicked

 $('.flips').on('click',function(){
  var element = $(this);
   $.each('.flips',function(index){
       if($(this) !== element){
          $(this).hide(); // Or any function you want to use
       }
   });
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

There is no need to have different handlers

$(document).ready(function() {
  var $flips = $('.flip');
  $(".flipper").click(function() {
    var $cur = $(this).next().stop().slideToggle("fast");
    $flips.not($cur).stop().slideUp()
  });
});
.flip {
  display: none;
  color: #282828;
}
.flipper {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flipper">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flipper">two</div>
<div style="margin:10px 0px 80px 0px;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flipper">three</div>
<div style="margin-top:10px;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>

Upvotes: 0

Related Questions