I have a jquery function that removes content and toggles a button on twitter bootstrap and after that button is toggles, if you click it it's suppose to go back to the removes content, but it's not working. Please help. Thank you!
$('#btnAdd').click(function () {
$(".RemoveSettings").remove();
$(this).toggleClass('displaying');
$('#removedcontent').show();
});
$('#removedcontent').click(function () {
$('#removedcontent').remove();
$(".RemoveSettings").show();
});
You are removing elements, you cannot show them if they are removed.
Replace your remove()'s with hide()s instead.
$('#btnAdd').click(function () {
$(".RemoveSettings").hide();
$(this).toggleClass('displaying');
$('#removedcontent').show();
});
$('#removedcontent').click(function () {
$('#removedcontent').hide();
$(".RemoveSettings").show();
});
Related
I'm working on a little vertical accordion and I ran into a snag.
Upon clicking a div, that div opens up to fill the screen... I'm trying to reverse this upon clicking the "close button" div, but it's not working for me.
Here is my code... https://codepen.io/Finches/pen/mpyKrL
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function() {
$(this).parent().parent().removeClass("shutterExpanded");
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});
Any help here?
Try following code. Actually it is happening for you clicking each time on ".shutter". Because when you clicking on close button it is also inside of ".shutter" div that why it is collapsing then again opening.
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function(e) {
e.stopPropagation(); // Key line to work perfectly
if ($(this).parent().parent().hasClass("shutterExpanded")) {
$(this).parent().parent().removeClass("shutterExpanded");
};
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});
I'm trying to create multiple divs that can be closed with the click of a button. Being a novice at jquery, I'm sure there are better ways to do this.
My question is:
Are there better ways to do this?
EDIT: Is there a way to only have one div open and cancel out and already open one in the case a user does not close it??
//hidden divs
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
});
});
$(document).ready(function () {
$(".x").click(function () {
$("#bazinga_content").hide();
});
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("600", function () {});
});
$("#bazinga").click(function () {
$("#bazinga_content").show("600", function () {});
});
Here's my fiddle: http://jsfiddle.net/0t6uqwLm/13/
You can close multiple divs in a click event like this
$(document).ready(function () {
$(".x").click(function () {
$("#bazinga_content").hide();
$("#tcm_content").hide();
});
});
And you dont need to use multiple document.ready functions. You can actually use one document.ready and put everything into it.
Working JsFiddle here https://jsfiddle.net/0t6uqwLm/10/
New JsFiddle for the update made in question https://jsfiddle.net/0t6uqwLm/12/
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
$("#bazinga_content").hide();
});
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("slow");
});
$("#bazinga").click(function () {
$("#bazinga_content").show("slow");
});
Everything should go into the ready function, and you only need one click handler for the x class
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
$("#bazinga_content").hide();
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("600", function () {});
});
$("#bazinga").click(function () {
$("#bazinga_content").show("600", function () {});
});
});
As to what is better, this is a perfectly acceptable way to show and hide div's using jQuery.
To clarify, jQuery uses selectors to get at the specific elements on the page that you want. When you call $("#tcm").click... jQuery goes looking for that element with the id="tcm". If it has not loaded into the DOM yet, there will be no element to attach the click event to. That is why they should go into the ready function, because it does not get called until the document has loaded all of the elements.
For my website I allow the user to use a drop down to select various options, when they choose an option i have some jquery that should hide or show different pictures according to what they choose. However it doesn't seem to be changing.
I have created a js fiddle and put some text in on the cook section to try and test it but it still isn't working. Can anyone see why?
http://jsfiddle.net/av7E2/
$(document).ready(function () {
$('.box').hide();
$('#option1').show();
$('#select-portion').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.prepBox').hide();
$('#option10').show();
$('#select-prep-time').change(function () {
$('.prepBox').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.cookBox').hide();
$('#cook1').show();
$('#select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
});
Going by your fiddle, select-cook-time is a class and not an id value. Hence you should be using .select-cook-time instead. Try this
$('.select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
I looked at your fiddle. You are using #select-portion when you should be using .select-portion. You seem to have the same problem with all other dropdowns.
Apply this changes and change handlers will be invoked.
$('#select-cook-time') -> $('.select-cook-time')
$('#select-prep-time') -> $('.select-prep-time')
$('#select-portion') -> $('.select-portion')
Well in your fiddle, you have class="select-portion" and in the jquery you are looking for # not .
After cleaning up some of the typos in the markup and cleaning up the jQuery we get this -
$(document).ready(function () { // one document ready handler (although you can use as many as you'd like, this is just cleaner)
$('.box, .prepBox, .cookBox').hide(); // combine selectors
$('#option1, #option10, #cook1').show(); // combine selectors
$('.select-portion').change(function () { // change to class selector
$('.box').hide();
$('#' + $(this).val()).show();
});
$('.select-prep-time').change(function () { // change to class selector
$('.prepBox').hide();
$('#' + $(this).val()).show();
});
$('.select-cook-time').change(function () { // change to class selector
$('.cookBox').hide();
$('#' + $(this).val()).show();
});
});
You can see this in operation here - http://jsfiddle.net/jayblanchard/av7E2/1/
I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you
Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.
I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});
The Fiddle: http://jsfiddle.net/bscn3/
Scenario:
I want to use nested toggles inside tabbed containers, as in the fiddle.
My Issue:
When I click on Main Toggle ("Toggle 1") or ("Toggle 2"), the inner contents display.
But it closes if I click on anything inside. For Eg. If I click on Toggle 2, and if I click on Tab 1 -> Nested Toggle 1, Toggle 2 itself closes.
I want it to remain open.
My Guess:
The JQuery working closes the toggle if anything related to the Toggle (Even text content) is clicked.
My Need:
I want the Toggle to close only if those rectangular headers are clicked.
Also, if you can help clean up the code in such a way, that I don't need to write separate JS to make inner nested Toggles work independently of its parent or children toggles, it would great.
Currently I have two Toggle JS Functions written for the two toggles in example.
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
P.S. I haven't written the JS Code, I am using someone's template.
Thanks! :)
Seems like a pretty simple solution...
It's happening because the toggle currently activates whenever you click anythin inside of the li element (which includes the other toggle elements: .toggle2).
The solution therefore is to make it only activate the toggle when the .toggle/h6 element is clicked and change $(this).children(...) to $(this).siblings(...)
You can use the following as things are (same changes in TOGGLE and TOGGLE L2):
//TOGGLE
$('.toggle-view li .toggle').click(function () { // Changed selector
var text = $(this).siblings('.t'); // Changed to .siblings(...)
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive'); // Removed .children(...)
} else {
text.slideUp('fast');
$(this).removeClass('tactive'); // Removed .children(...)
}
});
//TOGGLE L2
$('.toggle-view2 li .toggle2').click(function () {
var text2 = $(this).siblings('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).removeClass('tactive2');
}
});
OR
Just use the first section...
//TOGGLE
$('.toggle-view li .toggle').click(function () {
var text = $(this).siblings('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive');
} else {
text.slideUp('fast');
$(this).removeClass('tactive');
}
});
and rename all of the .t2, .toggle2 etc. in your html to the same as the first one (i.e. .t2 becomes .t)
use event.stopPropagation()
i have updated jsfiddle
$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});