Fade in and out between divisions
I have a menu of 3 buttons, what I want to do is to hide the images of items item11, item22 and item33. When I click on button a, item11 disappears, and if I click, then on b, item11 disappears and item22 disappears, etc.
I have this jsfiddle for menus and sections: https://jsfiddle.net/0rqzh404/1/
and I have this fade in / out function, but I'm not sure how to connect to the html.
Jquery:
$(document).on('click','#item1', function()
{
$("").fadeOut(1000, function(){
$("").hide();
$("").show();
$("").fadeIn(1000);
});
});
$(document).on('click','#item2', function()
{
$("").fadeOut(1000, function(){
$("").hide();
$("").show();
$("").fadeIn(1000);
});
});
$(document).on('click','#item3', function()
{
$("").fadeOut(1000, function(){
$("").hide();
$("").show();
$("").fadeIn(1000);
});
});
Any help please.
source to share
You should just be working with buttons li
and they will get the id of the items, so you would do something like this:
$(".item").hide();
$(".headlines li").click(function(){
var el = $(this), id = el.attr("id").match(/\d+$/)[0], iditem = "#item" + id+id;
$(".item").not(iditem).fadeOut(); //Hide elements
$(iditem).fadeIn()//Just show one element
});
As a reminder, I had to replace type identifiers id="item11", id="item11", id="item11"
with id="item11", id="item22", id="item33"
because they must be unique.
source to share
You need to target the item you want to redeem.
Here's an example: https://jsfiddle.net/LL6w28xx/1/
Also you cannot duplicate elements id
on elements.
source to share
https://jsfiddle.net/0rqzh404/47/ Something like this? Using one class such as $('.btn')
is an easy way to group multiple activities.
source to share