1

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

$(function() {
  $('.view-source .hide').hide();
  $a = $('.view-source a');
  $a.on('click', function(event) {
    event.preventDefault();
    $a.next().slideToggle(500);
  });
});
.stfilters {
  width: 680px;
  border-bottom: 1px solid #9c9999;
  list-style-type: none;
  min-height: 140px;
  margin-left: 20px;
  margin-top: 15px;
  background: url(../img/select-arrow-open.png) 98% top no-repeat;
}
.stfilters_p {
  width: 680px;
  border-bottom: 1px solid #9c9999;
  list-style-type: none;
  min-height: 140px;
  margin-left: 20px;
  margin-top: 15px;
}
.sf-field {
  padding: 0 0 0 5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="view-source">
  <a href="#">
    <div class="stfilters" id="st" onClick="st()">
      <div>1</div>
    </div>
  </a>
  <div class="hide">
    <div class="stfilters_p">
      <p>werwer</p>

    </div>
  </div>
  <div class="hide">
    <div class="stfilters_p">
      <p>xcvxcv</p>

    </div>
  </div>
</div>

<div class="view-source">
  <a href="#">
    <div class="stfilters">
      <div>2</div>
    </div>
  </a>
  <div class="hide">
    <div class="stfilters_p">
      <p>xcvxcv</p>
    </div>
  </div>
</div>
<div class="view-source">
  <a href="#">
    <div class="stfilters">
      <div>3</div>
    </div>
  </a>
  <div class="hide">
    <div class="stfilters_p">
      <p>xcvxcv</p>
    </div>
  </div>
  <img src="https://www.google.by/search?q=%D1%81%D1%82%D1%80%D0%B5%D0%BB%D0%BA%D0%B8+%D0%B4%D0%BB%D1%8F+%D1%81%D0%B0%D0%B9%D1%82%D0%B0&espv=2&biw=1440&bih=731&source=lnms&tbm=isch&sa=X&ved=0ahUKEwid6Kqt-vTNAhWLKiwKHQOGAqkQ_AUIBigB&dpr=1#imgdii=KMmFxixU-gt6UM%3A%3BKMmFxixU-gt6UM%3A%3BGXWENTTnGsyyaM%3A&imgrc=KMmFxixU-gt6UM%3A"
  onClick="cf()">
</div>

2
  • а разве сейчас происходит не так?
    – Grundy
    15 июл 2016 в 8:00
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 18 июл 2016 в 9:00

1 ответ 1

1

$(document).ready(function(){
  var link = $('.view-source a'),
      img = $('img.toggle-sections'),
      state = false,
      sections = $('div.view-source').find('div.hide');
  
  sections.hide();
  
  $(link).on('click', function(event) {
    event.preventDefault();
    $(this).next().slideToggle(500);
  });
  
  $(img).on('click', function(){
     if(!state){
        state = true;
        sections.show('slow');
     }else{
       state = false;
       sections.hide('slow');
       }
  });
});
.stfilters {
  width: 680px;
  border-bottom: 1px solid #9c9999;
  list-style-type: none;
  min-height: 140px;
  margin-left: 20px;
  margin-top: 15px;
  background: url(../img/select-arrow-open.png) 98% top no-repeat;
}
.stfilters_p {
  width: 680px;
  border-bottom: 1px solid #9c9999;
  list-style-type: none;
  min-height: 140px;
  margin-left: 20px;
  margin-top: 15px;
}
.sf-field {
  padding: 0 0 0 5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="view-source">
  <a href="#">
    <div class="stfilters" id="st" >
      <div>1</div>
    </div>
  </a>
  <div class="hide">
    <div class="stfilters_p">
      <p>werwer</p>

    </div>
  </div>
  <div class="hide">
    <div class="stfilters_p">
      <p>xcvxcv</p>

    </div>
  </div>
</div>

<div class="view-source">
  <a href="#">
    <div class="stfilters">
      <div>2</div>
    </div>
  </a>
  <div class="hide">
    <div class="stfilters_p">
      <p>xcvxcv</p>
    </div>
  </div>
</div>
<div class="view-source">
  <a href="#">
    <div class="stfilters">
      <div>3</div>
    </div>
  </a>
  <div class="hide">
    <div class="stfilters_p">
      <p>xcvxcv</p>
    </div>
  </div>
  <img class="toggle-sections" src="https://codelabs.developers.google.com/codelabs/firebase-web/img/a5941d3daaa70956.png">
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.