Динамическая смена контента при клике на блок с изображением
∘JS 05.08.19 05.08.19 581
на главную сниппетов<![CDATA[<script>(function($){
$(document).ready(function(){
$('.js-open-box').on('click', function(){
$('.plus').removeClass('hidden');
$('.minus').addClass('hidden');
$(this).find('.plus').addClass('hidden')
$(this).find('.minus').removeClass('hidden');
$('.js-block-of-text').hide();
var index = $('.js-open-box').index( $(this) );
$('.js-block-of-text').eq(index).show();
});
});
})(jQuery);
</script>
<style>
.plus, .minus {
width: 40px;
height: 40px;
}
.hidden {
display: none;
}
.picture1, .js-open-box {
display: inline-block;
width: 40px;
height: 40px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="responsive sum_rel_wide_slider_mob">
<div class="picture1"><a class="js-open-box" href="#/"><img src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" class="plus hidden"><img src="https://i.ibb.co/phfVDVq/pic-minus.png" class="minus"></a></div>
<div class="picture1"><a class="js-open-box" href="#/"><img src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" class="plus"><img src="https://i.ibb.co/phfVDVq/pic-minus.png" class="minus hidden"></a></div>
<div class="picture1"><a class="js-open-box" href="#/"><img src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" class="plus"><img src="https://i.ibb.co/phfVDVq/pic-minus.png" class="minus hidden"></a></div>
<div class="picture1"><a class="js-open-box" href="#/"><img src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" class="plus"><img src="https://i.ibb.co/phfVDVq/pic-minus.png" class="minus hidden"></a></div>
<div class="picture1"><a class="js-open-box" href="#/"><img src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" class="plus"><img src="https://i.ibb.co/phfVDVq/pic-minus.png" class="minus hidden"></a></div>
<div class="picture1"><a class="js-open-box" href="#/"><img src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" class="plus"><img src="https://i.ibb.co/phfVDVq/pic-minus.png" class="minus hidden"></a></div>
</div>
<p class="btsc_text_af_cat_pic">Выберите категорию</p>
<div class="js-block-of-text block-of-text">1111</div>
<div class="js-block-of-text block-of-text hidden">2222</div>
<div class="js-block-of-text block-of-text hidden">3333</div>
<div class="js-block-of-text block-of-text hidden">4444</div>
<div class="js-block-of-text block-of-text hidden">5555</div>
<div class="js-block-of-text block-of-text hidden">6666</div>]]> на главную сниппетов
