Как скрыть все элементы при открытии

Question

Как скрыть все остальные div при открытии.

вот мой JS часть:

$(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>

Answer 1

Я хотел бы изменить свой код, чтобы упростить его и сделать его более многократного использования, используя общие классы для флип-дивы и информационных дивы:

$(".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>

Это очень похоже на функциональность аккордеона - если вы хотите готовый встроенный один, вы могли бы использовать jquery ui accordion

Answer 2

Вам не нужно три отдельных обработчика. Вы можете иметь один общий класс (скажем flip) для DIV переворачивается и еще один общий класс (скажем flipnext) для всех дивы рядом с flipdivs:

ОБНОВЛЕНО 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> 

ОБНОВЛЕНО CSS:

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

SCRIPT ТРЕБУЕТСЯ:

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

Working Demo

Answer 3

Там нет необходимости иметь различные обработчики

$(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>

Answer 4

Использование JQuery Я думаю, с помощью $ .each петли вы можете сделать это ...

вы нужно добавить «filps» как класс все флипа-диве ... как это ...

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

В JavaScript вы можете использовать $ .each функции петли JQuery, чтобы закрыть все дивы, кроме одного, который щелчок

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

Answer 5

Дайте всем вашим флип-дивам общий класс, например: «флиппер». С помощью этого одного класса вам нужен только один вызов функции в jquery. Я добавил параметр данных (mtarget), чтобы получить ссылку на ваши div, которые вы хотите открыть и закрыть.

Чтобы отметить, какой из ваших «mtarget-divs» открыт, добавьте к ним класс. Например: «flip-active».

Теперь, если вы нажмете слайд вниз на один div, он станет активным, если раньше был активен другой (с классом «flip-active»), он должен сдвинуться вверх.

Смотрите здесь пример кода:

<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(); 
    });