I have three buttons on screen, only one of the three have a class called 'show_hide'. When 'show_hide' is called, it make a div show. However the other two buttons do not make reset show_hide to hidden.
How do I make the other two buttons reset the show_hide to hidden when they are pressed?
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".show_hide").hide();
});
Maybe you could had a class to your other button '.hideBtn' and catch the click to do the hide:
$(".hideBtn").click(function(){
$('.show_hide').hide();
})
Related
I have a page with several popovers that are acting as additional information for products.
When functioning as intended a user should be able to click on a popover, and when they click on another popover the previous popover closes. This functionality already exists in my current code, however, when a user does this the previous popover's button does not have its toggle state reset. This means when the user clicks on the second popover and tries clicking on the original one they have to click twice (once to set the toggle back to original state, and once to reopen it).
I would like to know how to reset the toggle state of all other popovers when a new popover is opened.
You can see my current working code here:
http://codepen.io/kcarskadon/pen/BLJdkJ?editors=1010
Here is the current jquery I am using:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).hide()
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
Thanks for the help!
You're hiding the item, not using the popover hide function, try it like this:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).popover('hide');
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
I have two button start and stop. on page load stop button hide and start button show.
when i click start button this button hide and stop button show.
i am using .hide() method.
Jquery Code:
$(window).load(function ()
{
$('#stop').hide();
});
It's working but issue is when page load this (stop button) will show for a second(like a blink) and then hide. i want to hide completely mean i don't want to show stop button when page load.
Hide it once only the button has loaded, not the whole window.
$("#stop").load(function() {
$(this).hide();
});
Otherwise you can always use CSS to hide it with display:none;
Maybe use CSS :
#stop { display: none; }
It is because you have used the load event handler, So till all the resources of the page is loaded the script is not executed.
One possible solution is to use a css rule, with the id selector to hide the element like
#stop{display: none;}
$(document).ready(function () {
$("#btnStop").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnPlay").show();
})
$("#btnPlay").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnStop").show();
})
})
I do have 2 elements in my page which i want to show them when user clicks on 2 different buttons.
Here is my code
$('.social-toggle').on('click', function() {
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$(this).next().toggleClass('open-menu');
});
When user clicks on the first button, the first element will be show up, but i want either user clicks on the second button or one of the links in the opened-menu the first opened menu be closed.
JSFIDDLE
You do not need to write two different event here. Use comma seprated multiple selector for targetting both button:
$('.social-toggle,.social-toggle1').on('click', function() {
$('.social-networks').not($(this).next()).removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
Working Demo
Here is the code what you want. You didnt removed the class which was applied previously.
$('.social-toggle').on('click', function() {
$('.social-toggle1').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$('.social-toggle').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
I am trying to Toggle two classes .btn-primary and .btn-default ONLY on parent of the checked Radio on Bootsrap 3 radio Buttons at This Demo. But as you can see from the example it only works at first check radio and incase of checking another radio the previous button loses both classes
$(function () {
$('input:radio[name="opts"]').change(function () {
$(this).parent().toggleClass("btn-primary btn-default");
});
});
can you please let me know why this is happening and how I can fix it? Thanks
This should do the trick -
$(function () {
$('input:radio[name="opts"]').change(function () {
$('.btn').removeClass('btn-default');
$('.btn').addClass('btn-primary');
$(this).parent().removeClass('btn-primary');
$(this).parent().addClass('btn-default');
});
});
Here is your fiddle: http://jsfiddle.net/cMALS/1/
I have found a tutorial on some dropdown menu using jquery. It works fine but I want to adjust it just a little. Instead of hiding the menu using hovering, I want to have the same button that showed the menu, to hide it when it is being pressed again. So the same button has to both hide and show the dropdown menu.
The script that im using:
$(document).ready(function () {
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function () { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function () {
}, function () {
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function () {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function () { //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
Use jQuery's .toggle() http://api.jquery.com/toggle/
$("#yourbutton").click(function() {
$("#yourmenu").toggle();
});
You can save yourself from adding a CSS rule by using jQuery's .toggle method.
$('#yourMenu').toggle()
This will hide it if it's visible, and show it if it's hidden. You can add a number or 'fast', 'slow' as a parameter to make it animate.
jQuery.toggle() function will do this work for you:
$("#button").on('click', function() {
$("#menu").toggle();
});
Yes, toggleClass can be used. Or you can also define your own toggle function in javascript.
you can toggle between the classes or do any other function you want to.
function tog(elemen){
if(elemen.className == "show") {
hide drpdwn
elemen.className="hide";
} else {
make dropdwn visible
elemen.className="show";
}
}