title: replace a div hidden intially by a click on a link from 3 other 3 linkes(3 other divs)
body: <p>Hi I want  to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:</p>
  <pre><code>                  &lt;script type=&quot;text/javascript&quot;&gt;
                      #4 Id of divs
                        var models = document.getElementById('models')
                        var geometry = document.getElementById('geometry')
                        var assembly = document.getElementById('assembly')
                        var loads = document.getElementById('loads')
                    #4 ID OF  links (related to each div)
                        var models1 = document.getElementById('models1')
                        var geometryy = document.getElementById('geometryy')
                        var assemblyy = document.getElementById('assemblyy')
                        var loads1 = document.getElementById('loads1')
                        geometryy.addEventListener(&quot;click&quot;, function () {
                          models.style.display = &quot;none&quot;
                          loads.style.display = &quot;none&quot;
                          assembly.style.display = &quot;none&quot;
                          geometry.style.display = &quot;block&quot;
                        })
                  
                        assemblyy.addEventListener(&quot;click&quot;, function () {
                          geometry.style.display = &quot;none&quot;
                          models.style.display = &quot;none&quot;
                          loads.style.display = &quot;none&quot;
                          assembly.style.display = &quot;block&quot;
                        })
                        loads1.addEventListener(&quot;click&quot;, function () {
                          geometry.style.display = &quot;none&quot;
                          models.style.display = &quot;none&quot;
                          assembly.style.display = &quot;none&quot;
                          loads.style.display = &quot;block&quot;
                        })
                        models1.addEventListener(&quot;click&quot;, function () {
                          models.style.display = &quot;block&quot;
                          geometry.style.display = &quot;none&quot;
                          assembly.style.display = &quot;none&quot;
                          loads.style.display = &quot;none&quot;
                        })
                      &lt;/script&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>    &lt;style&gt;
        #loads { 
          display: none;
        }
        #geometry { 
          display: none;
        }
        #assembly { 
          display: none;
        }
        #models {
          display: block;
        }
  &lt;/style&gt;
  </code></pre>
  <p>some Html code about the 4 divs:</p>
  <pre><code>                  &lt;form  action=&quot;{% url 'results' %}&quot; method=&quot;post&quot;  id=&quot;gallery&quot; novalidate onsubmit=&quot;return mySubmitFunction(event)&quot;&gt;
                    &lt;div style=&quot;padding-top: 10px; margin-left:138px;&quot; class=&quot;parallax-window tm-section tm-section-gallery tm-flex background &quot; id=&quot;models&quot; &gt;
                        &lt;div style=&quot; background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; &quot;&gt;
                          &lt;div class=&quot;card-warning&quot; style=&quot;background-color: #C0C0C0;&quot;&gt;
                              &lt;nav class=&quot;navbar&quot;&gt;
                                &lt;a class=&quot;floated&quot; style=&quot;font-weight: bolder; border-style: solid;&quot; id=&quot;models1&quot;&gt;Models&lt;/a&gt;
                                &lt;a href=&quot;#geometry&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder; &quot; id=&quot;geometryy&quot;&gt;Geometry&lt;/a&gt;
                                &lt;a href=&quot;#assembly&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot; id=&quot;assemblyy&quot;&gt;Assembly&lt;/a&gt;
                                &lt;a href=&quot;#loads&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot; id=&quot;loads1&quot;&gt;Loads&lt;/a&gt;
                              &lt;/nav&gt;
                          &lt;/div&gt;
      .......... some fields related to the div id=&quot;models&quot;
                            &lt;/div&gt;
                          &lt;/div&gt;
   ----------------About the second div
                  &lt;div style=&quot;padding-top: 10px;&quot; class=&quot;parallax-window tm-section tm-section-gallery tm-flex&quot; id=&quot;geometry&quot; &gt;
                    &lt;div style=&quot; background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; &quot;&gt;
                          &lt;div class=&quot;card-warning&quot; style=&quot;background-color: #C0C0C0;&quot;&gt;
                           &lt;nav class=&quot;navbar&quot;&gt;
                            &lt;a href=&quot;#models&quot;  class=&quot;floated&quot; style=&quot;font-weight: bolder;&quot;&gt;Models&lt;/a&gt;
                            &lt;a class=&quot;floated&quot; style=&quot; font-weight: bolder; border-style: solid;&quot;&gt;Geometry&lt;/a&gt;
                            &lt;a href=&quot;#assembly&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot; id=&quot;assembly2&quot;&gt;Assembly&lt;/a&gt;
                            &lt;a href=&quot;#loads&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot; id=&quot;loads2&quot;&gt;Loads&lt;/a&gt;
                           &lt;/nav&gt;
                          &lt;/div&gt;
                          &lt;div style=&quot;display: flex;&quot;&gt;
                            &lt;div&gt;
                              &lt;img  style=&quot;height: 372px; width:270px; margin-left: 25px;&quot;&gt;
                            &lt;/div&gt;  
                            &lt;div style=&quot;line-height: 0.001; margin-left: 10px; margin-top: 12px;&quot;&gt;
                            ------ some code for some fields
                            &lt;/div&gt;
                        &lt;/div&gt;
         ......    &lt;/div&gt;
    ----      &lt;/div&gt;
   ----------------About the third div
                   &lt;div style=&quot;padding-top: 10px;&quot; class=&quot;parallax-window tm-section tm-section-gallery tm-flex&quot; id=&quot;assembly&quot; &gt;
                    &lt;div  style=&quot;background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; &quot;&gt;
                      &lt;div class=&quot;card-warning&quot; style=&quot;background-color: #C0C0C0;&quot;&gt;
                        &lt;nav class=&quot;navbar&quot;&gt;
                          &lt;a href=&quot;#models&quot;  class=&quot;floated&quot; style=&quot;font-weight: bolder;&quot;&gt;Models&lt;/a&gt;
                          &lt;a href=&quot;#geometry&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot;&gt;Geometry&lt;/a&gt;
                          &lt;a class=&quot;floated&quot; style=&quot; font-weight: bolder; border-style: solid;&quot;&gt;Assembly&lt;/a&gt;
                          &lt;a href=&quot;#loads&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot; id=&quot;loads3&quot; &gt;Loads&lt;/a&gt;
                        &lt;/nav&gt;
                      &lt;/div&gt; 
                      &lt;div style=&quot;display: flex;&quot;&gt;
                                &lt;div&gt;
                                  &lt;img  style=&quot;height: 372px; width:270px; margin-left: 25px;&quot;&gt;
                                &lt;/div&gt;  
                                &lt;div style=&quot;line-height: 0.001; margin-left: 10px; margin-top: 12px;&quot;&gt;
                                ------ some code for some fields
                                &lt;/div&gt;
                      &lt;/div&gt;
   ......         &lt;/div&gt;
      ----     &lt;/div&gt;
   ----------------About the fourth div
            &lt;div style=&quot;padding-top: 10px; &quot; class=&quot;parallax-window tm-section tm-section-gallery tm-flex&quot; id=&quot;loads&quot; &gt;
                 &lt;div  style=&quot;background-color: white; font-size:89%; width: 62rem; height: 32rem;  margin-left:2.5rem;&quot;&gt;
                    &lt;div class=&quot;card-warning&quot; style=&quot;background-color: #C0C0C0;&quot;&gt;
                      &lt;nav class=&quot;navbar&quot;&gt;
                        &lt;a href=&quot;#models&quot;  class=&quot;floated&quot; style=&quot;font-weight: bolder;&quot; &gt;Models&lt;/a&gt;
                        &lt;a href=&quot;#geometry&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot;&gt;Geometry&lt;/a&gt;
                        &lt;a href=&quot;#assembly&quot; class=&quot;floated&quot; style=&quot; font-weight: bolder;&quot; id=&quot;assemblyyy&quot;&gt;Assembly&lt;/a&gt;
                        &lt;a  style=&quot; font-weight: bolder; border-style: solid;&quot;&gt;Loads&lt;/a&gt;
                      &lt;/nav&gt;
                      &lt;/div&gt; 
                      &lt;div style=&quot;display: flex;&quot;&gt;
                                &lt;div&gt;
                                  &lt;img  style=&quot;height: 372px; width:270px; margin-left: 25px;&quot;&gt;
                                &lt;/div&gt;  
                                &lt;div style=&quot;line-height: 0.001; margin-left: 10px; margin-top: 12px;&quot;&gt;
                                ------ some code for some fields
                                &lt;/div&gt;
                      &lt;/div&gt;
   ......         &lt;/div&gt;
      ----     &lt;/div&gt;
               &lt;/form&gt;
  </code></pre>
  <p><strong>what i want :at first the &quot;models&quot; div is shown and the other 3 divs(&quot;geometry&quot;,assembly&quot;,&quot;loads&quot;) are hidden , so i want when i click on &quot;geometry&quot; div , the first div &quot;models&quot; become hidden and the other divs (&quot;assembly&quot; and &quot;loads&quot; still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)</strong>
  But it doesn't give me any result!</p>