CODEWITHSUNDEEP
javascriptjquery
linnse
linnse

Reputation: 461

Javascript needed to make jQuery code for this Show/Hide div feature more efficient

How can I write this jQuery more efficiently? The goal is to be able to click on a menu item in one div (left column), and change the contents in another div (right column). Here's what I have so far:

$(document).ready(function(){
$('#content1').hide();  
$('#content2').hide();
$('#content3').hide();
$('#content4').hide();      

$('#link1').click(function(){ 
$('#content1').show('slow');  
$('#content2').hide();
$('#content3').hide();
$('#content4').hide();  
});

$('#link2').click(function(){ 
$('#content1').hide();  
$('#content2').show('slow');
$('#content3').hide();
$('#content4').hide();  
});  

$('#link3').click(function(){ 
$('#content1').hide();  
$('#content2').hide();
$('#content3').show('slow');
$('#content4').hide();  
});  

$('#link4').click(function(){ 
$('#content1').hide();  
$('#content2').hide();
$('#content3').hide();
$('#content4').show('slow');  
}); 
});

UPDATE: This is the latest jQuery code I have that I can't get to work. When I navigate to my page, all the content currently appears, but should be hidden. When I click on the links, nothing happens. All sections remain showing

$(document).ready(function() {
    var contents = $('.content')
    $('#nav a').click(function(e){
        e.preventDefault()
        var target = $(this.href)
        target.show()
        contents.not(target).hide()
    });
});

Upvotes: 0

Views: 292

Answers (2)

Ariful Islam
Ariful Islam

Reputation: 7675

$(document).ready(function(){
    hide_all();

   $('#link1').click(function(){ 
      hide_all_show_one('#link1');  
   });

   $('#link2').click(function(){ 
      hide_all_show_one('#link2');
   });  

   $('#link3').click(function(){ 
      hide_all_show_one('#link3');
   });  

   $('#link4').click(function(){ 
      hide_all_show_one('#link4');  
   });

   function hide_all_show_one(showelem)
   {
      hide_all();  
      $(showelem).show();
   }

   function hide_all()
   {
      $('#content1').hide();  
      $('#content2').hide();
      $('#content3').hide();
      $('#content4').hide(); 
   } 
});

Upvotes: -1

Ricardo Tomasi
Ricardo Tomasi

Reputation: 35253

Here we go:

$(document).ready(function(){
    var contents = $('#content1, #content2, #content3, #content4');

    $('#link1, #link2, #link3, #link4').click(function(){
        // get the number at the end of the ID
        var n = this.id.match(/\d+$/)[0]
        contents.not('#content'+n).hide()
        $('#content'+n).show()
    })
})

But, this is error prone and not very mantainable, if not convoluted. This is why we have classes. Give a common class to your "content" elements, and you probably already have a meaningful structure for the links (which in turn should point to their respective target's IDs):

<ul id="nav">
    <li><a href="#content1">Content 1</a></li>
    <li><a href="#content2">Content 1</a></li>
</ul>

<div id="content1" class="content">...</div>
<div id="content2" class="content">...</div>

So you can turn this into something more straight-forward:

var contents = $('.content')

$('#nav a').click(function(e){
    e.preventDefault()
    var target = $(this.href)
    target.show()
    contents.not(target).hide()
})

Upvotes: 2

Related Questions