CODEWITHSUNDEEP
jqueryhtmlclickonload
Jeff
Jeff

Reputation: 111

jquery onclick load div

May I know is it possible to do this in jquery?

I have a category link:

<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Moulds</a></li>
<li><a href="#">Videos</a></li>
</ul>

and the content are seperated by div

<div id="tools">This is the tools content</div>
<div id="moulds">This is the moulds content</div>
<div id="videos">This is the videos content</div>

by default it will show tools content and other twos (moulds and videos) div are hidden. They only show when the menu is click. On top of that is it possible to put loading picture when loading the other div or something like fade in fade out animation?

Can this be done? i search over stackoverflow but none of them meet what i want..

thank you in advance!

Upvotes: 0

Views: 22110

Answers (2)

roman
roman

Reputation: 919

hy

fadings are quite easy in jquery. here a sample

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>js test</h1>

<ul id="myMenu">
    <li><a href="#" data-id="tools">Tools</a></li>
    <li><a href="#" data-id="modules">Moulds</a></li>
    <li><a href="#" data-id="videos">Videos</a></li>
</ul>

<div class="subcontent" id="tools" style="display:block">tools</div>
<div class="subcontent" id="modules">modules</div>
<div class="subcontent" id="videos">videos</div>

<script type="text/javascript">
$(document).ready(function()
{
    $('#myMenu').on('click','a',function()
    {
        // fade out all open subcontents
        $('.subcontent:visible').fadeOut();
        // fade in new selected subcontent
        $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();
    });
});
</script>

<style type="text/css">
    div.subcontent { display:none; }
</style>

we register a event handler with $('#myMenu').on(..) witch listens on clicks on a link element (a) and fades out first all open (visible) divs. then it starts with fading in. in this case the fade out and fade in methods starts at the same time. with a callback function you're able to call this 2 steps after each other.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Why don't you use a tab / something similar. Anyways, you can do this way, but before, change the HTML this way:

<ul>
    <li><a href="#tools">Tools</a></li>
    <li><a href="#moulds">Moulds</a></li>
    <li><a href="#videos">Videos</a></li>
</ul>

And in the JavaScript give this way:

$("ul li a").click(function(){
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

If you want only one div to be shown, you can do this way:

$("ul li a").click(function(){
    $("div").hide();
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

My suggestion would be, using a common class for both the <div>s and <a>s.

Finally, you might arrive to this:

<ul>
    <li><a class="link" href="#tools">Tools</a></li>
    <li><a class="link" href="#moulds">Moulds</a></li>
    <li><a class="link" href="#videos">Videos</a></li>
</ul>

<div class="tab" id="tools">This is the tools content</div>
<div class="tab" id="moulds">This is the moulds content</div>
<div class="tab" id="videos">This is the videos content</div>

And then, the event handling would be:

$(".link").click(function(){
    $(".tab").hide();
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

Upvotes: 2

Related Questions