CODEWITHSUNDEEP
javascriptjquerycss
oglorp
oglorp

Reputation: 11

show one div and hide the rest onclick

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

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

I'm trying to get images to show in the red portions and to stay within the content div, but any time I add images, the layout breaks. I would really appreciate some help with these two things I want to achieve and thank you in advance:

1.) keep images constrained to and auto resizable within the (red) content div

2.) hide the images when the section is "shut" onclick.

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>

the 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");
}

Upvotes: 1

Views: 100

Answers (1)

Mr Khan
Mr Khan

Reputation: 2292

I just added this class to the rest of the divs which didnt have any images on them, hence the reason for them to show the red content div. Remove the 100%, the image text in between every column as well and create ids for every column and add background image to them and you are good to go :).

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

Upvotes: 1

Related Questions