Jump to content

Display separate divs with onclick

Recommended Posts

Admittedly I'm fairly new to Javascript, but I've taken numerous tutorials, classes, and have searched for hour online and I can't seem to figure out how to make my script work, and have edited it and edited it so many times I just want to start over.

What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.

I have this much, but as I've said I've looked through so many tutorials that I just scrapped loads.http://jsfiddle.net/petiteco24601/hgo8eqdq/

$(document).ready(function () {$(".talkbubble").mouseout(function(){$(".sidebar").show();});$$(".talkbubble").click(function(){$

How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?

Share this post

Link to post
Share on other sites

Give each six div's give unique id ref, and give each of 3 related div's a class name that matches the the id ref.

$(document).ready(function () {$(".talkbubble").mouseout(function(){$('.'+$(this).attr('id')).hide();$('.MatchingClassnameRefOfDefault').show();});//end mouseout$(".talkbubble").click(function(){$('.'+$(this).attr('id')).show();}); //end click});//end doc...ready

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...