I am having an issue to create a Jquery toggle that opens one div at a time.
I want that only one content shows up when i click on the div (show). Here, they both open at the same time.
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
JS Fiddle
Also: How can you add the option so that the open div hide once you open a new one but also give you the option to hide the one that is currently open even if you don't open a new div by clicking on the "hide" text)
You could do this several ways. With your current html markup you could use jQuery's Next Function.
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$(this).next().slideToggle();
});
Or you could wrap your toggle and content in a div and use the parent and find functions.
HTML
<div class="wrapper">
<div class="toggle"></div>
<div class="content">Lorem Ipsum </div>
</div>
JavaScript
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$(this).parent().find('.content').slideToggle();
});
If you want all other .content to slideUp when you toggle one of them, just select all .content divs and use jQuery's Not Function to exclude the div you just toggled.
$(".toggle").on("click", function(e){
var target = $(this).parent().find('.content');
$(this).toggleClass("expanded");
target.slideToggle();
$('.content').not( target ).slideUp();
});
Related
I have two or more buttons that that showing some content. The idea is to show #Cont11 when i click button .BB11 and hide #Cont11 when i click away or when i click two other buttons. And similarly for the rest. I managed to achieve show/hide when i click on certain button and click away but the windows dont hide when i click another button when the content is showing. Its needed to work on mobiles.
<div id="footer-menu">
<a class="BB11 BottomButton">Button1</a>
<a class="BB12 BottomButton">Button2</a>
<a class="BB13 BottomButton">Button3</a>
</div>
<div id="Content">
<div id="Cont11" class="ContIn">Some content</div>
<div id="Cont12" class="ContIn">Some content</div>
<div id="Cont13" class="ContIn">Some content</div>
</div>
Css:
.ContIn{display: none;}
JS:
$(".BB11").click(function(e){
$(".showing").fadeOut(300);
$("#Cont11").fadeIn(300); //toggle the window
$("#Cont11").toggleClass("showing");
$(this).toggleClass("highlighted");
e.stopPropagation(); //prevent event propagation
});
$(document).click(function(){
$("#Cont11").fadeOut(300); //hide the window
$("#Cont11").toggleClass("showing");
$(".BB11").removeClass("highlighted");
});
$("#Cont11").click(function(e){
e.stopPropagation();
});
/*------------------------------------*/
$(".BB12").click(function(e){
$(".showing").fadeOut(300);
$("#Cont12").fadeIn(300);
$("#Cont12").toggleClass("showing");
$(this).toggleClass("highlighted");
e.stopPropagation();
});
$(document).click(function(){
$("#Cont12").fadeOut(300);
$("#Cont12").toggleClass("showing");
$(".BB12").removeClass("highlighted");
});
$("#Cont12").click(function(e){
e.stopPropagation();
});
/*------------------------------------*/
$(".BB13").click(function(e){
$(".showing").fadeOut(300);
$("#Cont13").fadeIn(300);
$("#Cont13").toggleClass("showing");
$(this).toggleClass("highlighted");
e.stopPropagation();
});
$(document).click(function(){
$("#Cont13").fadeOut(300);
$("#Cont13").toggleClass("showing");
$(".BB13").removeClass("highlighted");
});
$("#Cont13").click(function(e){
e.stopPropagation();
});
use "data-" attributes and only a few classes for each button, that will help you to reduce all the script lines that you wrote. Here's a fiddle for you. This will simplify everything, just one method what works for all buttons. If you want the content to disappear when clicking away, I assume you're trying to create a modal. Because if you check for clicks in "document" it will disable all the other clickable elements. So, put an overlay above the document but behind the content and check for clicks there.
https://jsfiddle.net/tbd5e8cf/1/
$(function(){
$(".BottomButton").on("click", function(e){
e.stopPropagation();
// HIDE ALL ELEMENTS
$(".ContIn").fadeOut(); // IF YOU LIKE USE removeClass(); INSTEAD hide(); FOR YOUR CUSTOM CSS.
// SHOW THE RELATED CONTENT TO THIS BUTTON
var cont = $(this).attr("data-toOpen");
console.log(cont);
$("#"+cont).fadeIn(); // IF YOU LIKE USE show(); INSTEAD fadeIn(); FOR YOUR CUSTOM CSS.
})
$("#Content").on("click", function(e){//CHECK FOR CLICK
e.stopPropagation();
// HIDE ALL ELEMENTS
$(".ContIn").fadeOut();
})
})
I'm trying to get a fade toggle to work. When you click on (+) two it is supposed to show two links and change to (-) two and when you press again it closes those links and goes back to (+) two. Right now, I can't get anything to happen when you press on the toggle.
<div id="ending">
An everyday snapshot of
<div class="toggle"><span style="font-size:11px">(+) </span>two </div> sfsfs
</div>
<div class="content">
sfs & sfsf
</div>
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).next('.content').slideToggle(450);
e.stopPropagation();
});
});
https://jsfiddle.net/Dar_T/b5tbfn5g/
1) You actually have to reference/include the jQuery library for jQuery functions to work.
2) You had an improper selector.
Rather than $(this).next('.content').slideToggle(450);
just use $('.content').slideToggle(450); or $(this).parent().next('.content').slideToggle(450);
The content div is not a sibling of the toggle div.. so next() isn't going to find it. But if you back up to the parent of the toggle div, then the content div is a sibling, so next() will find it.....
Depending on the rest of the markup, the selector may need to be further altered, but that's the main issue with the function overall.
Seems to work with the selector fixed and the jQuery library actually included.
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).parent().next('.content').slideToggle(450);
e.stopPropagation();
});
});
Updated Fiddle
I took this simple code for drop down menu and it's working so far. The problem is that when I load the page, #drop menu is displayed, which is obviously not what we want. The goal is to show the #drop menu when #submenu link is clicked, not immediately.
I modified my code below, because I need a div element, not a list.
js
$(document).ready( function(){
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
});
html
Products
<div id = "drop" >
DROP DOWN MENU
</div>
Add some css:
#drop { display: none; }
just put this code in your dropdown.
Products
<div id = "drop" style="display:none;">
DROP DOWN MENU
</div>
and your problem will be resolved when page load drop div will be hidden that u can use toggle or show command in jquery function.
Regards
Imran Qasim
Since you don't want your element to be displaced when the page first loads, why not set its visibilty to hidden in the html, like style="visbility:hidden",and assign submenu link an action listener function and reference this element via getElementById and set its visibility to visible.
document.getElementbyId("dropDownMenu").style.visibility = "visible"
If you dont't want to use css then you can do it with jquery.
Products
<div id = "drop" >
DROP DOWN MENU
</div>
<scitpt type="text/javascipt">
$(document).ready( function(){
$('#drop').hide();
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
})
</script>
Fiddle
Creating tabs in jQuery. When you click another tab, all the tabs disappear. Can't figure out the fix
Here's the page not working: http://www.sleepfullnights.com/products/sfn-537
Here's the JSFiddle another guy made of it working: http://jsfiddle.net/gravitybox/7pHg4/ I've copied and pasted every element of this into the page and the issue is still there.
One person pointed out that something is giving the tabs the css "display:none" when clicked and I can't find where to fix it.
Also, another observation someone made was that "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');" when you click a tab".
Here's the jQuery code I have:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
And the code from the working JSFiddle:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
alert('yep');
});
});
});
Any help/guidance is greatly appreciated.
I'm the one who noted "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');"
It breaks there because that line is what is hiding the ul containing the tabs.
Looking at your website's code, you need to change the following inside app.js on Line 39.
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
to this:
$(contentLocation).show().addClass('active').siblings('div').hide().removeClass('active');
You only want to target the div siblings of the selected tab's content div. Right now, the ul is also a sibling of the selected div. Without the 'div', siblings() will select all of its siblings and hide() them (thus hiding the tabs too).
Preferably, I would add a tab-content class to the tab content div elements and use siblings('.tab-content') instead of siblings('div') to be more specific. That way if you add another div that happens to be a sibling, it won't hide that.
What's Going On
The code used for those tabs is much more complicated than you need, and I'm not really sure what is breaking. Rather than try to fix it, it would be easier to just start over. This is what you want:
Every time a user clicks on a tab, all tabs have the active class removed, and all content is hidden. Then, the active clicked on tab is given the active class and it's content is shown. This should seem instantaneous to the user. You will need to add a class to your content divs to accomplish this easily. I'd add tab-content.
Code
Working Fiddle
HTML (Only change is adding the class)
<div class="tab-content" id="tab-1">
...Content...
</div>
<div class="tab-content" id="tab-2">
...Content...
</div>
<div class="tab-content" id="tab-3">
...Content...
</div>
Javascript:
$(document).ready(function() {
$('.tabs li a').click(function(event){
event.preventDefault();
$('.tabs li a').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
$($(this).attr('href')).show();
});
});
It's definitely a problem with the ul getting display: none. You could try overriding it in the click handler with $('ul.tabs').css('display','block'). It's hard to tell where the issues is coming from because of the amount of scripts on your page.
I am using a nice script to hide and show several divs
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$('.content').hide();
// Show the requested content:
$('#' + content).show();
});
This works great on a single div with several items I like to hide.
But I use a template the retrieves news items and I like to make this work on all the divs induvidual. Also hide the second div by default.
<div class="content" id="div[[+idx]]-1">
<p>Show content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-2">
Link to show div id="div[[+idx]]-2" and hide id="div[[+idx]]-1"
</a>
</div>
<div class="content hide" id="div[[+idx]]-2">
<p>Hide content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-1">
Link to show div id="div[[+idx]]-1" and hide div id="div[[+idx]]-2"
</a>
</div>
Problem is I use this template for every iteration and the script does not support an undefined number of items and closes all my other divs. As does the second div does not hide on default.
I changed the link to link1 and then you get the follwoing unwanted bahavior:
http://jsfiddle.net/Vh7HR/8/
if I leave out the 1 it does nothing
make use of .parent()
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$(this).parent('.content').hide();
// Show the requested content:
$('#' + content).show();
});
You need to use delegation if you are adding new .link dynamically.
By using .on() you can listen for a click on document (or another element that is ancestor to .link and is present when the click handler is attached) and when the click is fired it will look for .link.
Try this:
$(document).on('click', '.link', function(e) {
I recommend you to use the on method provided by jquery to handle click events, the classic click method not works with elements that you create after rendering the DOM.
$( "your-selector" ).on( "click", function() {
alert( "Hello world!");
});