Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Alex Flores
Alex Flores
7,864 Points
Posted by Alex Flores
Alex Flores
7,864 Points

How to show/hide div content on click event (jquery)?

Hey everyone,

I'm losing my mind trying to figure this out. I've tried a number of different things, and the best that I get is the div will flash for a second and disappear. This is what I'm trying to do:

I'll have 4 links, which will not be visible when the page loads. When th user clicks one link, that link will show it's content (div). If/when a user clicks link 2, link 1 will disappear and link2 content will display.

This is what I have currently:

HTML:

<ul id="menu" class="menu no-bullet" >
                            <li><a id="Information_click" onclick="changeClass()" href=""><h3> Information </h3> </a></li>
                            <li><a href=""><h3> Portfolio </h3> </a></li> 
                            <li><a href=""><h3> Blog </h3> </a></li>
                            <li><a href=""><h3> Contact Me </h3> </a></li>
                        </ul>

                <div id="pages" class="hide">
                    <div id="information">
                        <div class="row">
                            <div class="columns large-6">
                                <h1> About Me </h1>
                                <p> Lorem ipsum information </p>
                            </div>
                        </div>
                    </div>
                </div>

CSS:

.hide {
    display: none;
}

.display_content {
    display: block;
}

JS- Jquery: 

$("#Information_click").click(function() {
    $('#pages').removeClass('hide');
});

Any help would be MUCH appreciated!

3 Answers

Nathan Ward
Nathan Ward
7,907 Points
Nathan Ward
Nathan Ward
7,907 Points

Hi,

Im assuming that you have an outer container with the ID "pages" and then different sections within that called "information", "portfolio", "blog" and "contact us". Each page would need the class "hide" not the outer container and a class "page" so your html would look something like this:

<ul id="menu" class="menu no-bullet" >
    <li><a id="information-link" href="#"><h3> Information </h3> </a></li>
    <li><a id="portfolio-link"href="#"><h3> Portfolio </h3> </a></li> 
    <li><a id="blog-link" href="#"><h3> Blog </h3> </a></li>
    <li><a id="contact-link" href="#"><h3> Contact Me </h3> </a></li>
</ul>

<div id="pages">
    <div id="information" class="page">
        <div class="row">
            <div class="columns large-6">
                <h1> About Me </h1>
                <p> Lorem ipsum information </p>
            </div>
        </div>
    </div>
    <div id="portfolio" class="page hide">
        <div class="row">
            <div class="columns large-6">
                <h1> Portfolio </h1>
                <p> Lorem ipsum portfolio </p>
            </div>
        </div>
    </div>
    <div id="blog" class="page hide">
        <div class="row">
            <div class="columns large-6">
                <h1> Blog </h1>
                <p> Lorem ipsum blog </p>
            </div>
        </div>
    </div>
    <div id="contact" class="page hide">
        <div class="row">
            <div class="columns large-6">
                <h1> Contact Me </h1>
                <p> Lorem ipsum contact </p>
            </div>
        </div>
    </div>
</div>

The css would simply be: 

.hide {
    display: none;
}

Then you could do something like this for your javascript:

$(document).ready(function() {
    $("#information-link").on('click', function() {
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#information').fadeIn('slow').removeClass('hide');
        });
    });
    $("#portfolio-link").on('click', function() {
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#portfolio').fadeIn('slow').removeClass('hide');
        });
    });
    $("#blog-link").on('click', function() {
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#blog').fadeIn('slow').removeClass('hide');
        });
    });
    $("#contact-link").on('click', function() {
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#contact').fadeIn('slow').removeClass('hide');
        });
    });
});

This could be achieved a lot easier using data attributes for example the "information" link and section could have the same data attribute and then you can simply search for a "page" with the same data attribute. This would look something like this:

<ul id="menu" class="menu no-bullet" >
    <li><a data-page="information" href="#"><h3> Information </h3> </a></li>
    <li><a data-page="portfolio" href="#"><h3> Portfolio </h3> </a></li> 
    <li><a data-page="blog" href="#"><h3> Blog </h3> </a></li>
    <li><a data-page="contact" href="#"><h3> Contact Me </h3> </a></li>
</ul>

<div id="pages">
    <div id="information" class="page" data-page="information">
        <div class="row">
            <div class="columns large-6">
                <h1> About Me </h1>
                <p> Lorem ipsum information </p>
            </div>
        </div>
    </div>
    <div id="portfolio" class="page hide" data-page="portfolio">
        <div class="row">
            <div class="columns large-6">
                <h1> Portfolio </h1>
                <p> Lorem ipsum portfolio </p>
            </div>
        </div>
    </div>
    <div id="blog" class="page hide" data-page="blog">
        <div class="row">
            <div class="columns large-6">
                <h1> Blog </h1>
                <p> Lorem ipsum blog </p>
            </div>
        </div>
    </div>
    <div id="contact" class="page hide" data-page="contact">
        <div class="row">
            <div class="columns large-6">
                <h1> Contact Me </h1>
                <p> Lorem ipsum contact </p>
            </div>
        </div>
    </div>
</div>

But this time the javascript required is a lot less: 

$(document).ready(function() {
    $("#menu li a").on('click', function() {
        var page = $(this).data('page');
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
        });
    });
});
Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

Hey Nathan,

I really appreciate you taking the time to help me out. A lot of good stuff here. However, I couldn't get the code to work, but it's probably because I'm unfamiliar with some of your code. Could you help explain a few of your lines (shown below):

 $("#pages .page:not('.hide')").stop().fadeOut('fast', function()

Not sure what ".page:not('.hide')" does. I tried looking it up in jquery documentation and couldn't find anything on this. Also, let me know if I have this right, this code is basically saying to stop the page from displaying "hide", but then I don't understand the purpose of the rest of the code...

             $(this).addClass('hide');
            $('#information').fadeIn('slow').removeClass('hide');
        });

$(this).addClass('hide') - we're adding the "hide" class to ?, then removing it from the element which we have intended (in this case, #information).

Sorry if these are amateur questions, but I am, in fact, an amateur. Thanks again for your help!

Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

I was laying in bed and it dawned on me... I'm using <a> when I should be using a non-loading tag like a <button>... I haven't checked this yet, but I think this is it.

Nathan Ward
Nathan Ward
7,907 Points
Nathan Ward
Nathan Ward
7,907 Points

Hi Alex I have added 'preventDefault' which will stop the page changing, here is a commented version of my code: 

$(document).ready(function() {
    $("#menu li a").on('click', function(e) {
        // prevent default behaviour of the anchor tag
        e.preventDefault();
        // save the data attribute for the anchor tag that was clicked
        var page = $(this).data('page');
        // find the current 'page' element that doesn't have the class .hide -- this is a css selector
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            // adds .hide to the element that was showing after it has faded out
            $(this).addClass('hide');
            // remove hidden class from element with the same data attribute as the anchor tag
            $('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
        });
    });
});

Also I have created a JSFiddle with my code here: https://jsfiddle.net/71bcwffj/

Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

You're the man. Thanks again!