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!");
});
Related
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 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();
});
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 have the following div, which is hidden:
<div class="showDescription 73" style="display:none;">blah blah blah</div>
and then at the side of it:
<div class="more" divtoshow="73" style="cursor:pointer">more...</div>
I want to click the div with class more and it shows the hidden div, then change the word more... to less..., remove class more, add a class canHide to it so when clicked again it will hide the div again. Simple stuff. It becomes this:
<div class="canHide" divtoshow="73" style="cursor:pointer">less...</div>
When i click the word more the hidden div shows and adds a class canHide, but when clicking it again nothing happens and I don't know why.
JQuery - this section works as it should:
$('.more').click(function() { // show hidden div
var classId = $(this).attr('divToShow');
$("." + classId).fadeIn();
$(this).removeClass('more');
$(this).addClass('canHide');
$(this).html('less...');
});
This section does nothing??
$('.canHide').click(function() { // hide shown div
var classId = $(this).attr('divToShow');
$("." + classId).fadeOut();
alert('hey'); // for test purposes only
$(this).removeClass('canHide');
$(this).addClass('more');
$(this).html('more...');
});
Here be a fiddle
You're changing the class, so that handler (which is bound at runtime), has no idea that that new class exists. Use event delegation:
$(document).on('click', '.canHide', function() { // hide shown div
});
document should be the element that contains the element with the .canHide class and is there at runtime, but since I can't see your HTML, document is a safe bet.
this might be easier
$('.more').click(function() {
// show/hide element before .more && toggle text
$(this).html($(this).html()=='▼'?'▲':'▼').prev('.showDescription').stop().fadeToggle();
});
It also removes the corresponding attributes between the more link and content, as it makes them unnecessary. ie divtoshow/class 73
made a fiddle: http://jsfiddle.net/filever10/zXz3c/
update: here's each piece broken down
$('.more').click(function() {
// get element
$(this)
//if html = ▼ then it should now be ▲, or if html = ▲ then it should now be ▼; else it should be ▼
.html($(this).html()=='▼'?'▲':'▼')
//get previous element by class
.prev('.showDescription')
//clear its queue to prevent buildup
.stop()
//fadeIn if it's hidden or fadeOut if it's visible
.fadeToggle();
});