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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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