需要帮助简化代码

Question

Okay, I have a page on a Drupal install that has multiple divs. I wrote a .js to test to see if there was any information inside those divs

if ($('.accred').length) {
    $('#accred').show();
}
else{
    $('#accred').hide();
}    
if ($('.admin-req').length) {
    $('#admis').show();
}
else{
    $('#admis').hide();
}    
if ($('.career-opp').length) {
    $('#career').show();
}
else{
    $('#career').hide();
}    
if ($('.co-op-diploma').length) {
    $('#co_op').show();
}
else{
    $('#co_op').hide();
}    
if ($('.prog-out').length) {
    $('#outcomes').show();
}
else{
    $('#outcomes').hide();
}    
if ($('.prog-struc').length) {
    $('#struc').show();
}
else{
    $('#struc').hide();
}    
if ($('.testimonials').length) {
    $('#testimon').show();
}
else{
    $('#testimon').hide();
}    
if ($('.transfer').length) {
    $('#transfer').show();
}
else{
    $('#transfer').hide();
}   
if ($('.tuition').length) {
    $('#tuition').show();
}
else{
    $('#tuition').hide();
}   

to hide or show the links that would allow you to click and show more information about each one, because each div except for one is hidden by default:

$(function(){
  $('#descrip').click(function(){
     $('.prog-descrip').show();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#accred').click(function(){
     $('.prog-descrip').hide();
     $('.accred').show(); 
     $('.admin-req').hide();
 $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#admis').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').show();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#career').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').show(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#co_op').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').show(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#outcomes').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').show(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#struc').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').show(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#testimon').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').show(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#transfer').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').show(); 
     $('.tuition').hide(); 
  });
  $('#tuition').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').show(); 
  });
});

The client, however, does not like this way of doing it. He wants to populate based on if there are more divs.

So, my question is this: How do I populate all of the divs and the code to show/hide divs based on which link they click dynamically using js or jquery? I am NOT a js or jquery guy, so pardon my naive question, if it is in fact naive. Thanks!

EDIT

Please re-read my question those who have replied. dynamically populating the information. In other words, the client does not want hard-coded divs.

Answer 1

更好的解决方案，只需提供隐藏自己的类所需的所有类，并使用.toggle（）。

Answer 2

Okay, so here is what I ended up doing. I ended up assigning each link the class of linkeddiv, and a rel of whatever the name of the content div was, like this:

<a href="#tuition" class="linkeddiv" rel="tuition">Tuition and Fees</a> 
<div class="prog-descrip prog-detail" style="display: none; ">

After that, I set an interval function to test the url of the page, and specifically grab the characters after the has mark. What this did was test to see if the page had changed, in case the end-user pressed the back button. If it did, it would automatically update the page to the proper div showing

setInterval(function() {
   // parse the url
   current_url = document.location.href;
   after_hash = current_url.split('#');

   if (after_hash[1] == null) {
       if ($('.prog-descrip').length) {
        $('.prog-detail').hide();
        $('.prog-descrip').show();
        $('#prog_link_block').show();
        $('#Program_Areas-1').hide();
       }
   } else {
       $('.prog-detail').hide();
       $('#Program_Areas-1').hide();
       $('.' + after_hash[1]).show();
   }
}, 100);

Once that was done, I just tested which link they clicked, and based on that, I hid or showed the div based on the rel link:

$('.linkeddiv').each(function() {
    contentdiv = $(this).attr('rel');
    if ($('.' + contentdiv).length == 0) {
        $(this).hide();
    }
});
$('.linkeddiv').click(function() {
    $('.prog-detail').hide();
    contentdiv = $(this).attr('rel');
    $('.' + contentdiv).show();
}); 

This achieved exactly what I was looking for. Also, it added the functionality of using the back button, instead of leading to a dead link (#).

You could also do some fun fade or slide if you wanted with the jquery.

Hope this helps someone.

Answer 3

The second section can be shortened to:

$('.accred, .admin-req, .career-opp, .co-op-diploma, .prog-out, .prog-struc,
 .testimonials, .transfer, .tuition').hide(); 
//Show the one you want