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?

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...