CODEWITHSUNDEEP
javascripthtml
Mtullis
Mtullis

Reputation: 145

How to open multiple DIVs using JavaScript

I am currently designing a site that has content arranged in pairs of divs (so I can position eav div within a grid) and a series of clickable thumbnails that I want to to load a different pair of divs (i.e. 1i & 1p) when you click on each of the 7 different thumbnails. The code I have is set to look for divs with the class "project", then activates a div using the id called out in the onclick event (i1-i7), so I am only able to tun on a single div, not a pair of them. The problem is I am brand new to JavaScript, so I don't know how to modify the code to get what I want accomplished. Can someone help? Maybe tell me how to make the code look for a div class instead of id, then I can just add multiple classes divs or something?

i tried changing "document.getElementById" to "document.getElementByClassName" and adding an additional class to my divs like <div class="project i1">, but none of the divs would show. At least the way it is, I cam make 1 of the divs work

<!doctype html>
<html lang="en-us">
<body>
    <div class="grid">
      <div class="content1">
        <div id="i1" class="project">
        <img src="">
        </div>

        <div id="i2" class="project">
        <img src="">
        </div>

        <div id="i3" class="project">
        <img src="">
        </div>

        <div id="i4" class="project">
        <img src="">
        </div>

        <div id="i5" class="project">
        <img src="">
        </div>

        <div id="i6" class="project">
        <img src="">
        </div>

        <div id="i7" class="project">
        <img src="">
        </div>
        </div> <!-- end content1 -->

        <div class="content2">
        <div id="p1" class="project">
        <p>lorem</p>
        </div>

        <div id="p2" class="project">
        <p>lorem</p>
        </div>

        <div id="p3" class="project">
        <p>lorem</p>
        </div>

        <div id="p4" class="project">
        <p>lorem</p>
        </div>

        <div id="p5" class="project">
        <p>lorem</p>
        </div>

        <div id="p6" class="project">
        <p>lorem</p>
        </div>

        <div id="p7" class="project">
        <p>lorem</p>
        </div>
 <div>
    <img class="tablinks" onclick="openDiv(event, 'i1')" src="">
    <img class="tablinks" onclick="openDiv(event, 'i2')" src="">
    <img class="tablinks" onclick="openDiv(event, 'i3')" src="">
    <img class="tablinks" onclick="openDiv(event, 'i4')" src="">
    <img class="tablinks" onclick="openDiv(event, 'i5')" src="">
    <img class="tablinks" onclick="openDiv(event, 'i6')" src="">
    <img class="tablinks" onclick="openDiv(event, 'i7')" src="">
</div>

<!-- Changes div when thumbnail clicked -->
<script>
    document.getElementsByClassName('tablinks')[0].click()
    function openDiv(evt, divName) {
    // Declare all variables
    var i, project, tablinks;
    // Get all elements with class="project" and hide them
    project = document.getElementsByClassName("project");
    for (i = 0; i < project.length; i++) {
    project[i].style.display = "none";
    }
    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", " ");
    }
    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(divName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>
</div>
</body>
</html>

Upvotes: 0

Views: 589

Answers (2)

I_Al-thamary
I_Al-thamary

Reputation: 4033

I just did the example for i1 and p1

function toggle_visibility(id1,id2) {
  
       if( document.getElementById(id1).style.display== 'block' && document.getElementById(id2).style.display== 'block'){
       document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';}
       else{
          document.getElementById(id1).style.display = 'block';
 document.getElementById(id2).style.display = 'block';}
    }
<!doctype html>
<html lang="en-us">
<body>
 <div>
    <img src="img.jpg" class="tablinks" onclick="toggle_visibility('i1','p1');" >
    
</div>
    <div class="grid">
      <div class="content1">
        <div   style="display: none;" id="i1" class="project">
        <p>i1</p>
        <img src="">
        </div>
<!--
        <div id="i2" class="project">
        <img src="">
        </div>

        <div id="i3" class="project">
        <img src="">
        </div>

        <div id="i4" class="project">
        <img src="">
        </div>

        <div id="i5" class="project">
        <img src="">
        </div>

        <div id="i6" class="project">
        <img src="">
        </div>

        <div id="i7" class="project">
        <img src="">
        </div>
        </div> -->

        <div class="content2">
        <div style="display: none;" id="p1" class="project">
        <p>p1</p>
        </div>  
<!--
        <div id="p2" class="project">
        <p>lordem</p>
        </div>

        <div id="p3" class="project">
        <p>lorem</p>
        </div>

        <div id="p4" class="project">
        <p>lorem</p>
        </div>

        <div id="p5" class="project">
        <p>lorem</p>
        </div>

        <div id="p6" class="project">
        <p>lorem</p>
        </div>

        <div id="p7" class="project">
        <p>lorem</p>
        </div> -->

Upvotes: 1

connexo
connexo

Reputation: 56773

Here's a simplified example of a strategy to connect items. I'm using a data-attribute to make the connection.

connectors.addEventListener('click', function(event) {
  document.getElementById(event.target.dataset.connectedItem).classList.toggle('show');
})
#connectors {
  display: flex;
  justify-content: stretch;
}

.connector {
  min-width: 50px;
  text-align: center;
}

div[id^=i] {
  background-color: #f0f0f0;
  opacity: 0;
  transition: all .4s ease-in-out;
}

.show {
  opacity: 1 !important;
}

.connector {
  border: 2px outset #ddd;
  cursor: pointer;
}
<div id="connectors">
  <div class="connector" data-connected-item="i1">i1</div>
  <div class="connector" data-connected-item="i2">i2</div>
  <div class="connector" data-connected-item="i3">i3</div>
  <div class="connector" data-connected-item="i4">i4</div>
</div>

<div id="i1">connected i1</div>
<div id="i2">connected i2</div>
<div id="i3">connected i3</div>
<div id="i4">connected i4</div>

Upvotes: 2

Related Questions