Javascript to change whole div on click
I have a website that lists products. There are about 30 products. There are now links to navigate to the details of each product. I want to place them on the same page and through javascript, change the content of a specific div on click. I know I can create 30 functions to change the display of 1 div to none..and showing another. how to achieve this .. i am doing something like this
function changeImg2()
{
$('#change_content').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).css('display', 'none');
$('#change_content2').stop(true, true).fadeIn({ duration: slideDuration, queue: false });
}
here is the type of div i have
<div id="change_content1">
<div class="viewport">
<a id="btn" href="http://www.flickr.com/photos/matt_bango/3479048548/">
<span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/HAND HELD POWER CUTTERS.jpg" alt="Northern Saw-Whet Owl" />
</a>
</div>
<div class="viewport no-margin">
<a href="http://www.flickr.com/photos/matt_bango/3478879694/">
<span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span>
<img src="images/LIGHTING TOWERS.jpg" alt="Red-shouldered Hawk" />
</a>
</div>
<div class="viewport">
<a href="http://www.flickr.com/photos/matt_bango/3478189088/">
<span class="light-background">Blue-headed Vireo <em>Photo by Matt Bango</em></span>
<img src="images/MAGNETIC STAND DRILLS.jpg" alt="Blue-headed Vireo" />
</a>
</div>
<div><input name="back" value="back" id="back_btn1" type="button"></div>
</div>
But this code doesn't fit ... because I will have to repeat it for 30 div's. Is there a cleaner way to achieve this.
source to share
Use something like this:
$('.myDiv').click(function() {
$('.myDiv').hide(); //Or whatever function you like
$(this).show(); //or whatever function you like
});
The idea is that it hides all divs with the same class and then is $(this)
used to control the individual div that was clicked on.
You can either target all divs by giving them a similar class, or if they are all inside a parent wrapper, use something like $('.parent-wrapper > div')
ANSWER TO COMMENT:
$(this)
when used in an event such as a click function, refers to the element on which the event was triggered. In this case, it will be a click event on one div, which means you can use it to control that div without targeting others.
As mentioned above, using a similar class or selector will allow you to target all divs so that you can manipulate them as a group. Note that the target div will most likely be included, so manipulate the group up to the target div.
Alternatively you can use $(this).siblings()
to control all other divs as long as they are on the same level as the clicked div, i.e. they are brothers and sisters.
source to share
It sounds like you want the () function. This can be implemented as:
jQuery.yourCallback = function () {
//this here is object, on which triggered event
//your code may be below
jQuery(".currentactivediv").removeClass(".currentdiv").hide();
jQuery(this).addClass(".currentdiv").show();
}
jQuery(".yourdivs").on("click",jQuery.yourCallback);
If you want it to work with links you need to find the required div in the DOM where you are using jQuery (this)
How it works: when the div shows - the script assigns calss.currentactivediv to that div. When another div shows - the script closes the current div, removes the .currentactivediv class from it and assigns that class to a new div that is displayed.
source to share
You can add a class to all your divs and then do something like this. This way you don't have to write 30 functions.
function changeImg(id) {
$('.your-divs').stop(true, true).fadeOut({ duration: slideDuration, queue: false });
$('#change_content'+id).stop(true, true).fadeIn({ duration: slideDuration, queue: false });
}
source to share