jQuery скрыть и показать свернуть несколько div

Мне нужно иметь возможность скрывать и показывать div на странице.

Мне нужен один активный по умолчанию, а затем, когда я нажимаю на другие ссылки, чтобы показать другой div, мне нужно скрыть активный div и так далее. Таким образом, в каждый момент времени открыт только один div.

Я собрал демонстрацию, чтобы показать, что мне нужно, у меня, так сказать, она работает, но мне нужно, чтобы она сворачивала/скрывала активный div после нажатия другой ссылки.

http://jsfiddle.net/QFfzs/3/


toggle jquery collapse show-hide
person pab    schedule 22.08.2012    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Вам нужно добавить класс к div, которые вы пытаетесь скрыть, а затем скрыть все div перед переключением следующим образом:

//adding '.hideMe' to the divs to be toggled
$(document).ready(function() {
    $('#hideDetailsDiv').hide();
    $('a#hideDetailsButton').click(function() {
        if (!$('#hideDetailsDiv').is(':visible')) {
            $('.hideMe').hide(400);
        }
        $('#hideDetailsDiv').toggle(400);
    });
});

JSFiddle: http://jsfiddle.net/QFfzs/4/

Обновленный JSFiddle: http://jsfiddle.net/QFfzs/5/ (сделано с меньшим количеством кода)

person CKKiller    schedule 22.08.2012
comment
возможно ли получить ссылку обратно в поле по умолчанию, как и в шоу ... ссылки ?? - person pab; 22.08.2012
comment
@Paul - самый простой способ сделать это - добавить ссылку в это поле по умолчанию и скрыть ее в начале. Затем после того, как появится другое окно, эта ссылка станет видимой. - person Misiu; 22.08.2012

arrow_upward
1
arrow_downward

Попробуйте что-то вроде этого:

$('.primaryButton2').click(function(){
   $('.hideDetailsDiv').hide();//hide all divs, add to them class .hideDetailsDiv
   $(this).nextAll('.hideDetailsDiv:first').show(400);
})
person user1440167    schedule 22.08.2012

arrow_upward
0
arrow_downward

Здесь я сделал полную корзину для вышеуказанной проблемы. вы можете проверить демо-ссылку....

Демо: http://codebins.com/bin/4ldqp84

HTML

<div id="panel">
  <a href="#">
    Show Default
  </a>
  <div class="box">
    <p>
      Default Div Box is already Active..!
    </p>
  </div>
  <a href="#">
    Show Box1
  </a>
  <div class="box">
    <p>
      Showing Div Box 1..!
    </p>
  </div>

  <a href="#">
    Show Box2
  </a>
  <div class="box">
    <p>
      Showing Div Box 2..!
    </p>
  </div>
  <a href="#">
    Show Box3
  </a>
  <div class="box">
    <p>
      Showing Div Box 3..!
    </p>
  </div>
  <a href="#">
    Show Box4
  </a>
  <div class="box">
    <p>
      Showing Div Box 4..!
    </p>
  </div>
</div>

CSS

.box{
  border:1px solid #334478;
  width:400px;
  height:50px;
  background:#f7a8a5;
  margin-top:3px;
  /* Default All Divs Are Hidden*/
  display:none;
}
#panel a{
  display:block;
  font-size:13px;
}
.box p{
  text-align:center;
}

JQuery

$(function() {
    //Show Default First div is Active
    $("#panel .box:first").show();
    $("#panel a").click(function() {
        $("#panel .box").hide(400);
        $(this).next(".box").show("slow");
    });
});

Демо: http://codebins.com/bin/4ldqp84

person gaurang171    schedule 22.08.2012