JQuery show and Hide elements

Question

Мне было интересно, есть ли более простой способ написать то, что я только что сделал ниже. В принципе, вся идея сайта заключается в том, что вы нажмете одну ссылку ... тогда она представит вам две переключатели, выбрав один из них даст вам другой набор ссылок, который щелкнул бы, даст вам таблицу ... и то же самое с другим переключателем.

  <script type="text/javascript"> 
      $('.topreports').toggleClass('reportshovered'); 
      $('#clickapp').click(function() { 
       $('#pendingappsasgn').hide(); 
       $('#closedappsasgn').hide(); 
       $('#pendingapptableasgn').hide(); 
       $('#adminpendingasgn').hide(); 
       $('#closedapptableasgn').hide(); 
       $('#closedpendingasgn').hide(); 
       $('#comp1').hide(); 
       $('#comp').slideDown('200'); 
      }); 

      $('#clickapp').click(function() { 
       $('#comp1').hide(); 
       $('#closedapps').hide(); 
       $('#comp').slideDown('200'); 

       //pending radio buttons 

       if ($('#app1').click(function() { 
        $('#closedapps').hide(); 
        $('#closedpending').hide(); 
        $('#closedapptable').hide(); 
        $('#pendingapps').slideDown('200'); 

       })); 

       //closed radio buttons 

       if ($('#app2').click(function() { 
        $('#pendingapps').hide(); 
        $('#pendingapptable').hide(); 
        $('#adminpending').hide(); 
        $('#closedapps').slideDown('200'); 


       })); 

       //2 pending links 

       if ($('#reporttemp').click(function() { 
        $('#adminpending').hide(); 
        $('#pendingapptable').slideDown('200'); 

       })); 

       if ($('#reportadmin').click(function(){ 
         $('#pendingapptable').hide(); 
         $('#adminpending').slideDown('200'); 
       })); 

       //Closed Approval Links 

       if ($('#closedtemps').click(function() { 
         $('#closedpending').hide(); 
         $('#closedapptable').slideDown('200'); 

       })); 

       if ($('#closedadmin').click(function() { 
        $('#closedapptable').hide(); 
        $('#closedpending').slideDown('200'); 

       })); 

      }); 

      //Assigned Approval list 

      $('#clickassigned').click(function() { 
       $("input:radio").removeAttr("checked"); 
       $('#comp').hide(); 
       $('#pendingapps').hide(); 
       $('#closedapps').hide(); 
       $('#pendingapptable').hide(); 
       $('#adminpending').hide(); 
       $('#closedapptable').hide(); 
       $('#closedpending').hide(); 
       $('#comp1').slideDown('200'); 


      }); 

      //assigned Approval Pending Radio 
      if ($('#asgnpending').click(function() { 
        $('#closedappsasgn').hide(); 
        $('#closedpendingasgn').hide(); 
        $('#closedapptableasgn').hide(); 
        $('#pendingasgn').slideDown('200'); 

      })); 

      //Assigned Approval closed radio buttons 

      if ($('#asgnclosed').click(function() { 
        $('#pendingasgn').hide(); 
        $('#pendingapptableasgn').hide(); 
        $('#adminpendingasgn').hide(); 
        $('#closedappsasgn').slideDown('200'); 


      })); 
      if ($('#reporttempasgn').click(function() { 
        $('#adminpendingasgn').hide(); 
        $('#pendingapptableasgn').slideDown('200'); 

      })); 

      if ($('#reportadminasgn').click(function() { 
        $('#pendingapptableasgn').hide(); 
        $('#adminpendingasgn').slideDown('200'); 
      })); 

      //Closed Approval Links 

      if ($('#closedtempsasgn').click(function() { 
        $('#closedpendingasgn').hide(); 
        $('#closedapptableasgn').slideDown('200'); 

      })); 

      if ($('#closedadminasgn').click(function() { 
        $('#closedapptableasgn').hide(); 
        $('#closedpendingasgn').slideDown('200'); 

      })); 

Answer 1

Вы можете присвоить класс аналогичным элементам и скрыть их с помощью селектора классов.

$(".classSelect").hide();