$(document).ready(function() {
$('#b1').click(function() {
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('#uch2').toggle("slow");
})
})
I'm not a programmer but somehow managed to make div buttons that opens another div when clicked but I cant manage how to make so that when I click on one button that opens div and then when I click on other button it opens div and hides previous div. I want to integrate it later to joomla template, but as I use jquery and all efforts with if not working maybe someone is clever then me. thanks in advance. I place here working fiddle too.
fiddle example of my buttons
affter some usefull answers i reedited my code and managed to simplify it and added third button , now with extra css class everything seems pretty good but when i click already opened div it reappears as if looping.
edited fiddle
$(document).ready(function() {
$('#b1').click(function() {
$('.bats').hide("slow");
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('.bats').hide("slow");
$('#uch2').toggle("slow");
});
$('#b3').click(function() {
$('.bats').hide("slow");
$('#uch3').toggle("slow");
});
})
You can call hide('slow') on the other uch element on click of the button. Try this:
$('#b1').click(function() {
$('#uch').toggle("slow");
$('#uch2').hide("slow");
});
$('#b2').click(function() {
$('#uch').hide("slow");
$('#uch2').toggle("slow");
});
Working example
Change ID To Class
$(document).ready(function() {
$('.b1').click(function() {
$('.uch').hide();
$(this).find('.uch').toggle("slow");
});
});
https://jsfiddle.net/u28f6yeL/5/
Here is a working solution for your problem:
change your JQuery code like this:
$(document).ready(function() {
$('#b1').click(function() {
if($('#uch2').css('display') != 'none'){
$('#uch2').toggle("slow");
};
$('#uch').toggle("slow");
});
$('#b2').click(function() {
if($('#uch').css('display') != 'none'){
$('#uch').toggle("slow");
};
$('#uch2').toggle("slow");
});
});
Here's a JSFiddle
you can write a function which close the one is opend! than call them in your click-funktions before toggle the other.
Related
In this, I try to do hide and show the div's.
It's working well but I want to reduce this code because it looks like same on click function
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail").hide();
$(".product_food").hide();
$(".product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
$(".product_retail").show();
$(".product_pro").hide();
$(".food-pro").removeClass('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".retail-pro").addClass('pro-active');
$(".product_food").hide();
$(".product_xclusive").hide();
});
$(".food-pro").click(function() {
$(".product_retail").hide();
$(".product_food").show();
$(".product_pro").hide();
$(".food-pro").addClass('pro-active');
$(".retail-pro").removeClass('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".product_xclusive").hide();
});
});
You can try this:
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail").hide();
$(".product_food").hide();
$(".product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
hideOrDisplayElements(1);
});
$(".food-pro").click(function() {
hideOrDisplayElements(0);
});
});
function hideOrDisplayElements(blnIsRetailProClicked){
$(".product_retail, .product_food")[blnIsRetailProClicked ? 'show' : 'hide']();
$(".food-pro, .retail-pro")[blnIsRetailProClicked ? 'removeClass' : 'addClass']('pro-active');
$(".xclusive-pro").removeClass('pro-active');
$(".product_xclusive .product_pro").hide();
}
The most obvious would be:
$(document).ready(function() {
$(".product_pro").show();
$(".product_retail, .product_food, .product_xclusive").hide();
$(".retail-pro").addClass('pro-active');
$(".retail-pro").click(function() {
$(".product_retail").show();
$(".food-pro, .xclusive-pro").removeClass('pro-active')
$(".retail-pro").addClass('pro-active');
$(".product_food, .product_xclusive, .product_pro").hide();
});
$(".food-pro").click(function() {
$(".product_retail, .product_pro, .product_xclusive").hide();
$(".product_food").show();
$(".food-pro").addClass('pro-active');
$(".retail-pro, .xclusive-pro").removeClass('pro-active');
});
});
But I'd recommend to put a common class in the elements you want hidden or visible in the different states, change the class of the container by state (not each element), and manage everything with css.
Much simpler and cleaner.
I really stuck on this, what I need is to switch the image together with the tabs text, but the image should be outside of the tabs container. I made some jQuery code, but it's not flexible in case if I want to add more tabs and the functions are duplicating, which is also looks not so well.
Is there some option, maybe a function that will check if the number of cliked tab will match with image id and switch the image according this number.
Please help :)
The code example - http://codepen.io/DeoThemes/pen/EyAjVA
jQuery:
$('#tabs-img-1').show();
$("a[href='#tab-1']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-1').show();
});
$("a[href='#tab-2']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-2').show();
});
$("a[href='#tab-3']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-3').show();
});
$("a[href='#tab-4']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-4').show();
});
$("a[href='#tab-5']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-5').show();
});
This will do without changing any of your code. Let me know your feedback. Thanks!
$('.tabs a[data-toggle="tab"]').on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-' + $(this).attr('href').split('-')[1]).show();
});
or better still you can place an attribute on the a tag which will be the id of the tab!
I have edited your Codepen.
Add custom attribute to anchor link:
Business Oriented
And then change your script to this:
$("ul.nav-tabs li a").on('click', function() {
$('.tabs-img').hide();
$($(this).attr('imgId')).show();
});
I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.
$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});
Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});
<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});
I have this jquery code:
http://jsfiddle.net/y8wPw/60/
All I want is that after DIV with content opens, it must stay visible, so that I can go over it and use this div as a form( or some other purpose). But now, if I make a MOUSEOUT from Content div , it disappears.
Jquery code:
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").toggle();
})
})
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
})
Why not try:
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
})
I have edited your js fiddle code by adding a wrapper and assigning the event to it.
I guess that fixes you problem :)
updated the html to
<div id="wrap">
<div class="body">Hellp</div>
<div class="desc">Any content here!</div>
</div>
<div class="clear"></div>
updated the css
#wrap{overflow:hidden}
updated the js
$(document).ready(function() {
$("#wrap").hover(function () {
$(".desc").toggle();
})
})
The link http://jsfiddle.net/RUtgE/1/
Use .css('display', 'block') instead of .toggle()
JSFiddle
You can use mouseenter instead of hover. In this case it will show the first time you go over the "help" button, the next time it will close again.
Check out http://api.jquery.com/category/events/mouse-events/ for more mouse events to play with!
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
$(".close").click(function () {
$(".desc").hide();
})
$(".wrap").mouseleave(function () {
$(".desc").hide();
})
})
http://jsfiddle.net/y8wPw/74/
This is what i was looking for! With some of your help i managed to make it!
Thanks to all!