Динамическая смена контента при клике на блок с изображением

05.08.19 13:28:45 05.08.19 13:29:31 85
<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>