показать один div и скрыть остальные по клику

Question

https://leiacarts.github.io/index.html

https://codepen.io/leiacarts/pen/PoqRxNZ

Я пытаюсь заставить изображения отображаться в красных частях и оставаться в пределах Div содержимого, но каждый раз, когда я добавляю изображения, макет ломается. Я был бы очень признателен за помощь в этих двух вещах, которых я хочу достичь, и заранее благодарю вас:

1.) Ограничивать изображения и автоматически изменять их размер в пределах (красного) содержимого div

2 .) Скрыть изображения, когда раздел «закрыт» по щелчку.

HTML:

<div class="section">
  <div class="bookmark">&#8593; ten &#8596; sion &#8595;</div>
  <div class="content"><p></p>
    <!-- <div class="space"></div> -->
      <!-- <img class="fit" src="images/ziptiesmall.png">
      <img class="fit" src="images/ziptiesmall2.png">
      <img class="fit" src="images/ziptiesmall3.png"> -->
  </div>
</div>

JavaScript:

var sections = document.querySelectorAll(".section")

sections.forEach(function(section) {
  section.addEventListener("click", expandSection);
})

function expandSection(event) {

let section = (event.target.classList.contains("section")) ? event.target : event.target.parentNode;


sections.forEach(function(section) {
  section.classList.remove("open")
})

section.classList.add("open");
}

Answer 1

Я только что добавил этот класс к остальным элементам div, на которых не было изображений, поэтому у них появилась причина показать красный div содержимого. Удалите 100%, текст изображения между каждым столбцом, а также создайте идентификаторы для каждого столбца и добавьте к ним фоновое изображение, и вы хороши в go:).

.content.bg.zip {
    margin-left: 40px;
    /* width: 100%; */
    background-color: #000;
    background-image: url(images/ziptiepattern.png);
    background-repeat: repeat;
}