Добрый день, как у как мне сделать по нажатию на картинку чтобы все блоки раскрывали одновременно, а если еще раз нажали свернулись обратно
$(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>