Displaying a div(has style"display:none") by clicking image in another div
I have 5 images on a div(like thumb images of products). And I'm having another div with briefed tabbed section.
My coding(like below):
- Div with 5 images.
- Another Div has 5 tabbed section with its product details.
- In addition, second div has property
style"display:none"
. I want make it visible to see the clicked thumb for its detailed div section.
Thanks in advance.
You can use .show()
and .hide()
to toggle the 'display:none' to show/hide the div.
Here is an example of how to do this.
http://jsbin.com/anere3/3/edit
Hope this helps.
Bob
My answer can only get as good as your description.
$("#theDivToBeClickedOn").click(function(){
$("#theDivWhereImageIs").show();
});
I assume you have some other tags that have the specific image descriptions, so you'll have to show/hide them too.
$('#div1 img').click(function(){ //when you click on the thumb in the first div
var i = $('#div1 img').index(this); //get index of thumb to correspond to image
$('#div3').toggle(); //show third div
$('#div3 div').eq(i).toggle(); //show the particular thumb's description
});
精彩评论