Make code dynamic/lighter using concatenation and Jquery selectors

Question

I've been looking around for ways to make this VERY explicit block of code I have more dynamic. Code and more explanation below:

HTML first:

    <nav>
        <ul>
            <li><span id="home-btn">Home</span></li>
            <li><span id="work-btn">Work</span></li>
            <li><span id="contact-btn">Contact</span></li>
        </ul>
    </nav>

I didn't feel the need to paste the actual content DIVs, appropriately ID'ed as #home, #work, #contact, each have a class with the same name as their IDs, as well as shared class called .page. The reason I've used <span> instead of <a> tags there was because the anchors kept reloading the page and causing issues.

 $( document ).ready(function() {
    $('div#home').show();
    $('div#work, div#contact').hide();
 });

$('#home-btn').click(function(){

    $('#home').show();
    $('.page').not('#home').hide();

});

$('#work-btn').click(function(){

    $('#work').show();
    $('.page').not('#work').hide();

});

$('#contact-btn').click(function(){

    $('#contact').show();
    $('.page').not('#contact').hide();

});

As you can see my code is very redundant, and I want to make it more dynamic. My initial attempts tried to concatenate selectors, but I am still novice with JS and wasn't able to get a solution that worked. My next attempt tried to use the .data HTML attribute and JQuery method, but I wasn't able to get that to work either. I've used different .addClass, removeClass, and hasClass methods to add .active and .hidden classes to the elements .onClick. That solution got me closest, but didn't function as I would like.

My biggest challenge has been: how do I associate the "buttons" that listen for the click events to know which divs to show or hide (that's where my use of the data attribute came in)... some other solutions I've researched but haven't tried (simply because I don't know how to customize them for my code) were .split, .each, and using this.

Thanks in advance! :)

Answer 1

First, I would change up your html just a little bit like this:

<nav class="main-nav">
    <ul>
        <li><span data-content="#home">Home</span></li>
        <li><span data-content="#work">Work</span></li>
        <li><span data-content="#contact">Contact</span></li>
    </ul>
</nav>

Now each span has a way to reference its element you want to show.

 $( document ).ready(function() {
    $('.page').hide();
    $('#home').show();
 });

ID attributes should be unique, so there is no reason you need to do div#id, you can just do #id

Now for the dynamic part:

$('.main-nav').find('span').on('click', function()
    {
        $('.page').hide(); //hide all the content
        $( $(this).attr('data-content') ).show(); //grab the reference we set up in data-cotnent and show that element.
    }
)};

Answer 2

HTML:

You can also use <a> instead of <span> , to counter the reload issues use property href='javascript:void(0)';

    <nav>
        <ul>
            <li><span load="home" id="home-btn">Home</span></li>
            <li><span load="work" id="work-btn">Work</span></li>
            <li><span load="contact" id="contact-btn">Contact</span></li>
        </ul>
    </nav>

JS:

Give a class to all those content divs you want to load say '.page', so it would easier for you to hide them.

$('nav ul li span').click(function(){
   var load = $(this).attr('load');
   $('.page').hide();
   $('#'+load).show();
});

Answer 3

Use the data-* attribute in your tag:

HTML:

<nav>
    <ul>
        <li><span data-target="home"    id="home-btn">Home</span></li>
        <li><span data-target="work"    id="work-btn">Work</span></li>
        <li><span data-target="contact" id="contact-btn">Contact</span></li>
    </ul>
</nav>

JS:

$('nav ul li span').click(function(){
    var load = $(this).data('target');
    $('.page').hide();
    $('#'+load).show();
});

The data-* works on all major browsers, including older versions of IE.