Good afternoon, like u how do i do by clicking on the picture so that all the blocks open at the same time, and if once again they are curled back

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

  • But is it not happening now? - Grundy
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 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>