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

268
13 мая 2021, 22:30

Возникла проблема при клике на изображение и появление контента

У меня есть 6 блоков с изображениями, при клике на которые должен снизу появляться контент

К примеру по клику на изображение "+" должен появляться какой-либо контент(как с dropdown menu) и должна происходить смена изображения на "-" и это изображение находится чуть ниже(эффект активного элемента)

У меня смена картинки работает только на первом блоке, все остальные отображаются изначально, хотя должны быть скрыты.

И далее если переключаться между блоками, то должен закрываться другой блок(который активный), но опять же отрабатывает не так как надо.

И как сделать, так, чтобы при первоначальной открытии страницы, именно первый элемент уже был раскрыт?

jQuery(document).ready(function() { 
  jQuery('.js-open-box').click(function() { 
    var id = jQuery(this).attr("data-target"); 
    if (!jQuery(id).hasClass("active")) { 
      //показать блок снизу 
      jQuery(this).find('img.change_pic_bottom').hide(); 
      jQuery(this).find('img.change_pic_top').show(); 
      jQuery(id).addClass("active"); 
    } else { 
      //убрать блок снизу 
      jQuery(id).removeClass("active"); 
      jQuery(this).find('img.change_pic_bottom').show(); 
      jQuery(this).find('img.change_pic_top').hide(); 
    } 
  }); 
  jQuery(this).find('img.change_pic_top').hide(); 
});
.btsc_wrapper { 
  max-width: 1200px; 
  text-align: center; 
  margin: 0 auto; 
  margin-bottom: 50px; 
} 
 
img.change_pic_top { 
  margin-top: 100px; 
} 
 
.picture1 { 
  transition: 0.5s; 
  border: 0; 
  display: inline-block; 
} 
 
.btsc_main_pic { 
  margin-top: 40px; 
} 
 
.btsc_txt { 
  margin-bottom: 50px; 
} 
 
.picture1 img { 
  -webkit-transition: opacity 0.2s ease-in-out; 
  -moz-transition: opacity 0.2s ease-in-out; 
  -o-transition: opacity 0.2s ease-in-out; 
  transition: opacity 0.2s ease-in-out; 
  height: 323px; 
} 
 
.shadow_pics { 
  position: relative; 
  display: inline-block; 
  min-width: 110px; 
  margin-left: 0px; 
  margin-bottom: 18px; 
  overflow: hidden; 
  vertical-align: middle; 
  text-align: center; 
  cursor: pointer; 
  line-height: 105px; 
  border-radius: 20px; 
  box-shadow: 0 3px 10px rgba(0, 0, 0, .1); 
  margin-right: 30px; 
  width: 164px; 
  height: 240px; 
} 
 
.block-of-text { 
  display: inline-block; 
  margin-left: 15px; 
  height: 0px; 
  overflow: hidden; 
} 
 
.block-of-text.active { 
  height: auto; 
}
<div class="responsive sum_rel_wide_slider_mob"> 
  <div class="picture1"> 
    <a class="js-open-box" href="#/" data-target="#box1"><img class="pic1_img change_pic_top" id="imgClickAndChange" onclick="changeImage()" src="https://i.ibb.co/phfVDVq/pic-minus.png" /><img class="change_pic_bottom" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box" href="#/" data-target="#box2"><img class="pic1_img change_pic" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /><img class="change_pic_bottom" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box" href="#/" data-target="#box3"><img class="pic1_img change_pic" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /><img class="change_pic_bottom" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box" href="#/" data-target="#box4"><img class="pic1_img change_pic" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /><img class="change_pic_bottom" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box" href="#/" data-target="#box5"><img class="pic1_img change_pic" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /><img class="change_pic_bottom" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box" href="#/" data-target="#box6"><img class="pic1_img change_pic" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /><img class="change_pic_bottom" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
</div> 
<p class="btsc_text_af_cat_pic">Выберите категорию</p> 
<div class="js-block-of-text block-of-text" id="box1"><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img 
    class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" 
    src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" 
  /><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img 
    class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /><img class="pic1_img shadow_pics" 
    src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /></div> 
<div class="js-block-of-text block-of-text" id="box2"><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /></div> 
<div class="js-block-of-text block-of-text" id="box3"><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /></div> 
<div class="js-block-of-text block-of-text" id="box4"><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /></div> 
<div class="js-block-of-text block-of-text" id="box5"><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /></div> 
<div class="js-block-of-text block-of-text" id="box6"><img class="pic1_img shadow_pics" src="https://www.staples-3p.com/s7/is/image/Staples/sp46530374_sc7?wid=512&amp;hei=512" /></div> 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

(Если уверены, что нужно использовать именно jQuery, а не $, это всё можно обернуть в общую функцию)

"Чтобы первый элемент изначально был раскрыт" — не добавлять класс "hidden" на первый элемент)

При условии, что все плюс-минусы будут являться разными картинками:

(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);
.plus, .minus { 
  width: 40px; 
  height: 40px; 
} 
 
.hidden { 
  display: none; 
} 
 
.picture1, .js-open-box { 
  display: inline-block; 
  width: 40px; 
  height: 40px; 
}
<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>

READ ALSO
не работает e.target внутри setTimeout [дубликат]
javascript

не работает e.target внутри setTimeout [дубликат]

Мне нужно через 2 секунды после запуска анимации, устанавливать display none

 102
Не работает корректно функция [закрыт]
javascript

Не работает корректно функция [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

 118
Как получить background color пикселя на странице
javascript

Как получить background color пикселя на странице

Хочу получить цвет заднего фона логотипа при скроллинге и если он достаточно темный, svg красить в белый цветЯ пробывал нарисовать прозрачный...

 105
Русскоязычные символы в Node.js
javascript

Русскоязычные символы в Node.js

Стандартный код для создания сервера Nodejs и вывода сообщения в браузер искажает русский текст

 104