Set of jQuery .onclick functions

Question

I am hiding and fading in different content on the same page using jQuery to hide() and fadeIn() the content depending on which link is clicked.

It works how I want it to, but the way I've written the jQuery looks like it could be simplified.

$("#navItem1").on('click', function(){
    $('#content-wrap1').hide();
    $('#content-wrap2').hide();
    $('#content-wrap3').hide();
    $('#content-wrap4').hide();
    $('#content-wrap5').hide();
    $('#content-wrap1').fadeIn(1000);
});
$("#navItem2").on('click', function(){
    $('#content-wrap1').hide();
    $('#content-wrap2').hide();
    $('#content-wrap3').hide();
    $('#content-wrap4').hide();
    $('#content-wrap5').hide();
    $('#content-wrap2').fadeIn(1000);
});
$("#navItem3").on('click', function(){
    $('#content-wrap1').hide();
    $('#content-wrap2').hide();
    $('#content-wrap3').hide();
    $('#content-wrap4').hide();
    $('#content-wrap5').hide();
    $('#content-wrap3').fadeIn(1000);
});
$("#navItem4").on('click', function(){
    $('#content-wrap1').hide();
    $('#content-wrap2').hide();
    $('#content-wrap3').hide();
    $('#content-wrap4').hide();
    $('#content-wrap5').hide();
    $('#content-wrap4').fadeIn(1000);
});
$("#navItem5").on('click', function(){
    $('#content-wrap1').hide();
    $('#content-wrap2').hide();
    $('#content-wrap3').hide();
    $('#content-wrap4').hide();
    $('#content-wrap5').hide();
    $('#content-wrap5').fadeIn(1000);
});


function fadeInFirstContent(){
    $('#content-wrap1').fadeIn(1000);

}
fadeInFirstContent();

Here's a jfiddle

How can I rewrite the jQuery so it does exactly the same thing but in much less code?

Answer 1

Perhaps change the HTML:

Navitem:

<span class="navItem" data-content-id="1"></span>

The content

<div id="content-wrap1" class="content-wrap"></div>

jQuery

$('.navItem').on('click',function(){
   $('.content-wrap').hide();
   $('#content-wrap'+$(this).data('content-id')).fadeIn(1000);
});

Answer 2

You don't have to change the HTML markup at all. You can make use of the starts-with CSS selector (^=):

// All elements with an ID starting with navItem...
$('[id^="navItem"]').on('click', function() {
    var
        // Get the ID as a string
        id = this.id,
        // Get the last character from the ID
        num = id.charAt(id.length-1)
    ;
    // Hide all elements with an ID starting with content-wrap...
    $('[id^="content-wrap"]').hide();
    // Fade in the relevant ID
    $('#content-wrap'+num).fadeIn(1000);
});

If we assume "navItem5" is used, here is what the variables would contain:

id == "navItem5"
num == "5"
$('#content-wrap'+num) == "#content-wrap5"

JSFiddle example.

This is very basic jQuery. You'd benefit from going through the official jQuery interactive tutorial: http://try.jquery.com.

Answer 3

I think this should do the trick

for (var j = 1; j <= 5; j++) {  
    (function(i){
        $("#navItem" + i).on('click', function(){
            $('#content-wrap1').hide();
            $('#content-wrap2').hide();
            $('#content-wrap3').hide();
            $('#content-wrap4').hide();
            $('#content-wrap5').hide();
            $('#content-wrap' + i).fadeIn(1000);
        });
    })(j);
}

Answer 4

yes there is...there are many ways to simplify this.. i am doing it by using data attribute to your <a> tag...and adding same class to all the contents <div> .(i am using content here)...

HTML

<nav>
<!-- Start of side menu -->
<ul id="mainNav">
    <li class="mainNavItem"><a href="#" id="navItem1" data-content="content-wrap1">Home</a>
    </li>
    <li class="mainNavItem"><a href="#" id="navItem2" data-content="content-wrap2">Prices</a>
    </li>
    <li class="mainNavItem"><a href="#" id="navItem3" data-content="content-wrap3">Find us</a>
    </li>
    <li class="mainNavItem"><a href="#" id="navItem4" data-content="content-wrap4">Reviews</a>
    </li>
    <li class="mainNavItem"><a href="#" id="navItem5" data-content="content-wrap5">Gallery</a>
    </li>
   </ul>
</nav>
<!-- closes mainNav -->
<div id="content-wrap1" class="content">Home</div>
<div id="content-wrap2" class="content">Prices contents</div>
<div id="content-wrap3" class="content">find us contents</div>
<div id="content-wrap4" class="content">review contents</div>
<div id="content-wrap5" class="content">gallery contents</div>

jquery

$('ul#mainNav li a').click(function () {
    $('.content').hide();
    $('#' + $(this).data('content')).fadeIn(1000);
});



function fadeInFirstContent() {
    $('#content-wrap1').fadeIn(1000);

}
fadeInFirstContent();

or without adding classes to content..

 $(function(){
   $('ul#mainNav li a').click(function () {
     $('div[id^="content-wrap"]').hide();
     $('#' + $(this).data('content')).fadeIn(1000);
  });
   $('#content-wrap1').fadeIn(1000);
});

fiddle here

Answer 5

It could be done much shorter: http://jsfiddle.net/2ADyp/

function hideAll(){
    $('#content-wrap1').hide();
    $('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
}

function showSelected(e){
    hideAll();
    $(e.target.hash).fadeIn(100);
}

$("#mainNav").find("a").each(function(i,o){ 
    $(o).click(showSelected);
});

Answer 6

Assuming you're using an expressive structure such as:

<nav>
    <a href="#content-wrap1" id="navItem1" class="navItem">One</a>
    <a href="#content-wrap2" id="navItem2" class="navItem">Two</a>
    <a href="#content-wrap3" id="navItem3" class="navItem">Three</a>
</nav>
<div id="content-wrap1" class="content-wrap">...</div>
<div id="content-wrap2" class="content-wrap">...</div>
<div id="content-wrap3" class="content-wrap">...</div>

You can then toggle the display of the content-wrap items in a short, expressive manner.

$('.navItem').on('click', function (e) {
    $('.content-wrap').hide();
    $($(this).prop('hash')).fadeIn(1000);
    e.preventDefault();
});

This does suggest changing the HTML, but only in ways that make the content semantic.

Answer 7

Here's one with minimal changes to the HTML (only a common container for the contents):

$( '.mainNavItem a' ).on( 'click', function() {
    $( '#content > div' ).hide()  // hide all content divs 
                                  // (immediate div children of the main container)
        .eq( $( this ).parent().index() )  // match the index of the clicked link
                                           // with the index of the corresponding content
        .fadeIn( 1000 );          // display that div
});

http://jsfiddle.net/VQtwa/2/

Answer 8

why not skip the javascript completely?

http://jsfiddle.net/zCd9g/

EDIT: sorry that's completely unhelpful seeing as this is a javascript question. Here's a solution with some modifications to the HTML:

http://jsfiddle.net/aECMb/

$('.link').click(function(e) {
    e.preventDefault();

    var $con = $('#main-content'),
        tar = $(this).data('show');

    $con.find('.contents').fadeOut();
    $con.find(tar).fadeIn();

});

Answer 9

I've noted some details, let me explain:

---

1. CSS Selectors. jQuery allows you to use them too:

   $("[id^='content-wrap']") --> will select all elements which id starts with 'content-wrap'

---

2. Substring is an available method of JavaScript:

var number = "navItem15".substring(7);
// will return what is after position 7.. 
// resulting the number "15"

---

3. To start your menu with the first position. This is the best way:

(function(){
    $("#navItem1").trigger("click");
})();
// using this approach, you won't need copy your code into a function as you did
// this approach triggers the "click" event in the first menu automatically

---

Well, hope you got it!

Nice coding!