Toggle both <div> and <p> onclick + hide <div>



  • I have a problem, that I presumed, should be fairly easy to solve, but regardless I still haven't mangaged.

    At this point I have a portfolio page, where each project is displayed alongside a an "Image" tag, when this tag is clicked, a bootstap modal pops up and shows images. I the code there also a paragraph-tag, but at the moment that is not displaying.

    What I want is that the image tag, below each project is hidden, along with a short describtion, upon opening the page, and so when the project title is clicked, both describtion and the image tag is made visible. and when the "image" is clicked, it still has the function of opening the modal.

    Here's my code

    $(document).ready(function(){
            $(".li_element").each(function(index) {
           	$(this).find('p,span.PopUp').first().hide();
            });
    
             $("li").click(function(){
               $(this).find('p,span.PopUp').first().toggle();
    
                  $(this).find('p,span.PopUp').first().toggle();
    
               $(this).toggleClass("expand");
    
    
             });
        });
    
    <li class="Project" data-modal="myModal_1">
    
                        <span id="myBtn_1">
                            Lirma Type
                        </span>
    
                        <span id="year">
                            2019
                        </span>
    
                        <div class="Describtion">
                            <p style="display:none;">
                               Typedesign
                               <span class="PopUp">Images</span>
                            </p>
                        </div>
    
                    
                        <div id="myModal_1" class="modal" >
                         <div class="modal-content">
    
                        <div id="demo" class="carousel slide" data-ride="carousel">
                              
                              <!-- The slideshow -->
                              <div class="carousel-inner">
    
                                <div class="carousel-item active">    
                                  <img src="Images/Lirma/type.jpg" alt="img" width="100%">
                                </div>
                              </div>
    
                             <p>Type design</p>
                       </div>
                    </div>
                </div>
            </li>
    


  • Awesome @cthornval

    Post anytime! One more favor to ask, do you mind selecting my answer as the correct solution? Thank you.



  • Hi @cthornval

    Do you mind sharing more of your markup? The more the better really. I



  • Here's almost the entire html 🙂 below, there's the different javascript codes including the javascript that i pastel in above. It's a lot though - but I hope it's okay.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    
    </head>
    
    
    
    <body>
    
    
    <div class="content">
    
          <div id="contact">
                  <a href="">About</a>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: c.thornval@live.dk &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
                 <br>
                 <br>
          </div>
    
      <ul style="list-style: none;">
    
    
    
          <li class="Project" data-modal="myModal_1">
    
                      <span id="myBtn_1">
                          Lirma Type
                      </span>
    
                      <span id="year">
                          2019
                      </span>
    
                      <div class="Describtion">
                          <p>
                             Typedesign
                             <span class="PopUp">Images</span>
                          </p>
                      </div>
    
                  
                      <div id="myModal_1" class="modal" >
                       <div class="modal-content">
    
                      <div id="demo" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                <img src="Images/Lirma/type.jpg" alt="img" width="100%">
                              </div>
                            </div>
    
                           <p>Type design</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
          <li class="Project" data-modal="myModal_2">
    
                   <span id="myBtn_2">
                      Wer Baut Der Stadt?
                  </span>
    
                  <span id="year">
                      2018
                  </span>
    
                  <div class="Describtion">
                    <span class="PopUp">Images</id>
                          <p style="display:none;">
                            Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                          </p>
                      </div>
    
                       <div id="myModal_2" class="modal">
                       <div class="modal-content">
    
                      <div id="demo1" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                              <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" alt="img" width="100%">
                              </div>
                              <div class="carousel-item">
                                <img src="Images/WER BAUT 2018/poster_mockup_MD1 kopi 2-kopi.jpg" alt="img" width="100%">
                              </div>
                            
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo1" data-slide="prev" ">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo1" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Type and identity design</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
    
                  
                     
    
          <li class="Project" data-modal="myModal_3">
    
                      <span id="myBtn_3">
                          CAFX
                      </span>
    
                      <span id="year">
                          2018
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                            Identity Design for Copenhagen Architecture Festival 2018
                          </p>
                      </div>
    
                       <div id="myModal_3" class="modal">
                          <div class="modal-content">
    
                              <div id="demo2" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/CAFX/poster_mockup_MD31-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/CAFX/poster_mockup_MD21-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/CAFX/poster_mockup_MD1-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_56184-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_56183-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_5618_5-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_5618_2-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_0546 (1)_Cafx_9-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_0546 (1)_Cafx_8-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_0546 (1)_Cafx2-kopi.png" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_0546 (1)_Cafx_7-kopi.jpg" alt="img" width="100%">
                              </div>
    
                                <div class="carousel-item">
                                  <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" alt="img" width="100%">
                              </div>
                          
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo2" data-slide="prev">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo2" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Identity design</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
    
    
    
    
    
          <li class="Project" data-modal="myModal_4">
    
                      <span id="myBtn_4">
                          Contagious Tales
                      </span>
    
                      <span id="year">
                          2017
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Graduation project, editorial design.
                          </p>
                      </div>
    
                       <div id="myModal_4" class="modal">
                          <div class="modal-content">
    
                              <div id="demo4" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                             
                              <div class="carousel-item active">    
                                  <img src="Images/Contagious Tales/IMG_5613_7-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/Contagious Tales/IMG_5613_4-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/Contagious Tales/IMG_5613_5-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/Contagious Tales/IMG_5613_3-kopi.jpg" alt="img" width="100%">
                              </div>
                            
                              <div class="carousel-item">
                                  <img src="Images/Contagious Tales/IMG_5613_2-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/Contagious Tales/IMG_5613-kopi.jpg" alt="img" width="100%">
                              </div>
                            
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo4" data-slide="prev">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo4" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Editorial design</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
    
    
    
    
          <li class="Project" data-modal="myModal_5">
    
                      <span id="myBtn_5">
                          Foam X Hydra
                      </span>
    
                      <span id="year">
                          2017
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Design of exhibition cahier in connection to the exhibition FOAM X HYDRA.
                          </p>
                      </div>
    
                       <div id="myModal_5" class="modal">
                          <div class="modal-content">
    
    
                          <div id="demo5" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/FOAM/Hydra1-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/FOAM/Hydra3-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/FOAM/Hydra2-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/FOAM/Hydra4-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/FOAM/Hydra5-kopi.jpg" alt="img" width="100%">
                              </div>
    
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo5" data-slide="prev">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo5" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Editorial design</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
    
    
        
    
    
    
          <li class="Project" data-modal="myModal_6">
    
                      <span id="myBtn_6">
                          Money Publication
                      </span>
    
                      <span id="year">
                          2017
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Money Can No Longer Buy
                          </p>
                      </div>
    
                       <div id="myModal_6" class="modal">
                          <div class="modal-content">
    
    
                          <div id="demo6" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/Money Publication/_97A0746-kopi 2.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/Money Publication/_97A0751-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/Money Publication/_97A0752-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/Money Publication/_97A0767-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/Money Publication/_97A0774-kopi.jpg" alt="img" width="100%">
                              </div>
                            
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo6" data-slide="prev">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo6" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Editorial design</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
    
    
    
          <li class="Project" data-modal="myModal_7">
    
                      <span id="myBtn_7">
                           What Is The News Article?
                      </span>
    
                      <span id="year">
                          2017
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Pamphlet with infographics.
                          </p>
                      </div>
    
                       <div id="myModal_7" class="modal">
                          <div class="modal-content">
    
                              
                          <div id="demo7" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/Newsarticle/_97A0846-kopi.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/Newsarticle/_97A0855-kopi.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/Newsarticle/_97A0883-kopi.jpg" alt="img" width="100%">
                              </div>
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo7" data-slide="prev">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo7" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Editorial Design</p>
                     </div>
                  </div>
              </div>
          </li>       
    
    
    
    
    
                            
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo11" data-slide="prev">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo11" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Litography Print</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
            <li class="Project" data-modal="myModal_12">
    
                      <span id="myBtn_12">
                          Wordshuffler
                      </span>
    
                      <span id="year">
                          2017
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Posters
                          </p>
                      </div>
    
                       <div id="myModal_12" class="modal">
                          <div class="modal-content">
    
                          <div id="demo12" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/Wordshuffler/_MG_9940 kopi-kopi.jpg" alt="img" width="100%">
                              </div>
                            
                            </div>
    
                           <p>Posterseries</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
          <li class="Project" data-modal="myModal_13">
    
                      <span id="myBtn_13">
                         Mumbliest
                      </span>
    
                      <span id="year">
                          2017
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Poster.
                          </p>
                      </div>
    
                       <div id="myModal_13" class="modal">
                          <div class="modal-content">
                          
    
                          <div id="demo13" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/Mumbliest/MUMBLIE-kopi.png" alt="img" width="100%">
                              </div>
                            
                            </div>
    
                           <p>Poster</p>
                     </div>
                  </div>
              </div>
          </li>
    
      
    
    
          <li class="Project" data-modal="myModal_16">
    
                      <span id="myBtn_16">
                           M/O
                      </span>
    
                      <span id="year">
                          2018
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Book-design
                          </p>
                      </div>
    
                       <div id="myModal_16" class="modal">
                          <div class="modal-content">
    
                              
                          <div id="demo16" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/MO/_MG_0153.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/MO/_MG_0156.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/MO/_MG_0156.jpg" alt="img" width="100%">
                              </div>
                            
                               <div class="carousel-item">
                                  <img src="Images/MO/_MG_0157.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/MO/_MG_0159.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/MO/_MG_0163.jpg" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/MO/_MG_0165.jpg" alt="img" width="100%">
                              </div>
    
                               <div class="carousel-item">
                                  <img src="Images/MO/_MG_0167.jpg" alt="img" width="100%">
                              </div>
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo16" data-slide="prev">
                              <span class="carousel-control-prev-icon" style="display:none;"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo16" data-slide="next">
                              <span class="carousel-control-next-icon" style="display:none;"></span>
                            </a>
                            </div>
    
                           <p>Editorial design</p>
                     </div>
                  </div>
              </div>
          </li>   
    
    
    
    
          <li class="Project" data-modal="myModal_17">
    
                      <span id="myBtn_17">
                           Panchen Lama
                      </span>
    
                      <span id="year">
                          2017
                      </span>
    
                      <div class="Describtion">
                        <span class="PopUp">Images</id>
                          <p style="display:none;">
                             Pamphlet Risoprint.
                          </p>
                      </div>
    
                       <div id="myModal_17" class="modal">
                          <div class="modal-content">
    
                              
                          <div id="demo17" class="carousel slide" data-ride="carousel">
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
    
                              <div class="carousel-item active">    
                                  <img src="Images/Panchen/IMG_8867 2.png" alt="img" width="100%">
                              </div>
    
                              <div class="carousel-item">
                                  <img src="Images/Panchen/Laatste.png" alt="img" width="100%">
                              </div>
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo17" data-slide="prev">
                              <span class="carousel-control-prev-icon"style="display:none;">
                              </span>
                            </a>
    
                              <a class="carousel-control-next" href="#demo17" data-slide="next">
                                <span class="carousel-control-next-icon"style="display:none;">
                                </span>
                              </a>
                            </div>
    
                           <p>Editorial design</p>
                     </div>
                  </div>
              </div>
          </li>
    
    
    
                
      </ul>
    
    </div>
    
    </body>
    
    
    <script src="pExpand.js"></script>
    <script src="ModalHide.js"></script>
    <script src="ModalPopUp.js"></script>
    
    
    
    </html>
    
    
    
    var myModal_1 = document.getElementById("myModal_1")
    var myModal_2 = document.getElementById("myModal_2")
    var myModal_3 = document.getElementById("myModal_3")
    var myModal_4 = document.getElementById("myModal_4")
    var myModal_5 = document.getElementById("myModal_5")
    var myModal_6 = document.getElementById("myModal_6")
    var myModal_7 = document.getElementById("myModal_7")
    var myModal_8 = document.getElementById("myModal_8")
    var myModal_9 = document.getElementById("myModal_9")
    var myModal_10 = document.getElementById("myModal_10")
    var myModal_11 = document.getElementById("myModal_11")
    var myModal_12 = document.getElementById("myModal_12")
    var myModal_13 = document.getElementById("myModal_13")
    var myModal_14 = document.getElementById("myModal_16")
    var myModal_15 = document.getElementById("myModal_17")
    
    
    
    window.onclick = function(event) {
        if (event.target == myModal_1) {
            myModal_1.style.display = "none";
        }
        if (event.target == myModal_2) {
            myModal_2.style.display = "none";
        }
    
         if (event.target == myModal_3) {
            myModal_3.style.display = "none";
        }
    
        if (event.target == myModal_4) {
            myModal_4.style.display = "none";
        }
    
         if (event.target == myModal_5) {
            myModal_5.style.display = "none";
        }
    
          if (event.target == myModal_6) {
            myModal_6.style.display = "none";
        }
    
          if (event.target == myModal_7) {
            myModal_7.style.display = "none";
        }
    
         if (event.target == myModal_8) {
            myModal_8.style.display = "none";
        }
    
           if (event.target == myModal_9) {
            myModal_9.style.display = "none";
        }
    
            if (event.target == myModal_10) {
            myModal_10.style.display = "none";
        }
    
            if (event.target == myModal_11) {
            myModal_11.style.display = "none";
        }
    
    
             if (event.target == myModal_12) {
            myModal_12.style.display = "none";
        }
    
             if (event.target == myModal_13) {
            myModal_13.style.display = "none";
        }
    
             if (event.target == myModal_16) {
            myModal_16.style.display = "none";
        }
    
              if (event.target == myModal_17) {
            myModal_17.style.display = "none";
        }
    
    
    
    
    }
    
      window.onload = function() {
          const span = document.querySelectorAll(".PopUp");
          span.forEach(LIelm => {
            LIelm.addEventListener('click', showHideModal)
          })
        };
    
    function showHideModal(e) {
          const projectNode = e.target.parentNode.parentNode;
          if (!projectNode.matches('.Project, .modal-content')) return
    
          e.preventDefault();
    
          if (projectNode.matches('.Project')) {
            document.getElementById(projectNode.dataset.modal).style.display = "block";
          } else {
            projectNode.parentNode.style.display = "";
          }
        }
    
    $(document).ready(function(){
            $(".li_element").each(function(index) {
           	$(this).find('p,span.PopUp').first().hide();
            });
    
             $("li").click(function(){
               $(this).find('p,span.PopUp').first().toggle();
    
                  $(this).find('p,span.PopUp').first().toggle();
    
               $(this).toggleClass("expand");
    
    
             });
        });
    


  • Hey @cthornval

    You might be slightly overthinking this. All you have to do is a apply all a class name to all the elements that you want to hide and then call the .hide() on them when the document loads. Then whenever somebody click on an parent element find the right child element that you want to show and call .toggle() on it:

    $(document).ready(function(){
            $(".modal").hide();
            $(".Project").click(function(){
                $(this).find('.modal').toggle();
             });
        });
    

    I hope this helps. Let me know.



  • Hey Avan

    Thank you so much I managed to make it nok in this way. Simplifying was defintely the way.



  • Awesome @cthornval

    Post anytime! One more favor to ask, do you mind selecting my answer as the correct solution? Thank you.