Automatisches Zurücksetzen, wenn Sie auf einen anderen Link klicken

Question

Der folgende Code ist, wenn Sie auf ein bestimmtes div klicken. Der versteckte Gegenstand wird angezeigt und ändert den CSS-Wert, um den Block anzuzeigen. und ich habe mehrere Menü oder Option, was ich versuche zu tun ist, wenn Sie ein certein div klicken. und du klickst auf einen anderen. der erste schließt automatisch Dies ist der Indikator <?php the_title(); ?> oder ID des Div.

Html

<a id="mylink" class="career-en blue" href="javascript:showhide('<?php the_title(); ?>')"> 

       <div class="Career-entry" > 

        <div class="row" > 
         <div class="col-md-5ths col-sm-6 col-xs-12"> 
         <?php the_field('position'); ?> 

         </div> 

         <div class="col-md-5ths col-sm-6 col-xs-12"> 
         <?php the_field('brandsubsidiary'); ?> 
         </div> 

         <div class="col-md-5ths col-sm-6 col-xs-12"> 
         <?php the_field('work_location'); ?> 
         </div> 

         <div class="col-md-5ths col-sm-6 col-xs-12"> 
         <?php the_field('date_posted'); ?> 
         </div> 


         <div class="col-md-5ths col-sm-6 col-xs-12"> 
         <?php the_field('aplication_dead_line_'); ?> 
         </div> 
        </div> 

       </div> 
       </a> 



      <div class="career-content" id="<?php the_title(); ?>" style="display:none;"> 
       <div class="row"> 
        <div class="col-md-6"> 
        <h6> <i> Position Summary: </i></h6> 

        <?php the_field('position_summary'); ?> 

        </div> 
         <div class="col-md-6"> 
         <h6> <i> Requirments: </i></h6> 


           <?php if(have_rows('requirments')):?> 

            <?php while (have_rows('requirments')) : the_row(); ?> 

             <p class="reqs"> - <?php the_sub_field('para'); ?> </p> 

             <?php endwhile; else : ?> 

           <?php endif; ?> 

         </div> 
        </div> 

        <div class="row"> 
         <div class="col-md-6"> 
         <h6> <i>Major Duties & Responsibilities: </i></h6> 

         <?php if(have_rows('major')):?> 

            <?php while (have_rows('major')) : the_row(); ?> 

              <p class="reqs"> - <?php the_sub_field('para'); ?> </p> 

              <?php endwhile; else : ?> 

            <?php endif; ?> 

         </div> 
         <div class="col-md-6"> 
         <h6> <i> Submit yoru resume: </i></h6> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


          <div class="col-md-7 col-sm-12"> 
<?php echo do_shortcode('[contact-form-7 id="112" title="Career"]'); ?> 

          </div> 

         </div> 

        </div> 
       </div> 



       <hr class="career-hr"> 
    <?php if ($x == 2) { echo '<div class="blog_box clear"></div>'; $x = -1; } $x++; ?> 
       <?php endwhile; ?> 
      </div> 

Css

.red{ 
    background-color: #e7f2ca; 
    display: block; 
} 

JS

  <script> 
     function showhide(id) { 
      var e = document.getElementById(id); 
      e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
     } 
     </script> 
     <script> 
     $('a#mylink').click(function() { 
      $(this).toggleClass('red blue'); 
     }); 
     </script> 

Answer 1

hinzufügen Klasse ab. 'Automatisch ausblenden' für alle Divs, die Sie automatisch ausblenden möchten. Dann:

$('.autohide').click(function(){ 
     $('.autohide').hide(); 
     $(this).show(); 
    }) 

Answer 2

Einfach zwicken Sie Ihren Code ein wenig, verwenden Sie einfach eine Variable, um den aktuell geöffneten Abschnitt zu verfolgen.

var current_open_section; 

function showhide(id){ 

    //hide open section first 
    if(current_open_section){ 
     current_open_section.style.display = 'none'; 
    } 
    //let the selected section be current open section 
    current_open_section = document.getElementById(id); 

    //show current open section 
    current_open_section.style.display = 'block'; 

}