I have a link that when clicked, will reveal a div below it. The div is hidden by default.
Inside of that div, there is an identical nested setup - a link that when clicked, will reveal a div beneath it.
The issue is, when the nested div is hidden by default, my jquery won't register clicks on the nested link. If the nested div is not hidden by default, everything works.
Another wrinkle of this - there will be multiple instances of the blocks below. So there could be 4 "outer-data" divs, each with their own "inner-data" divs. When the link is clicked, it should only hide the correspending "outer-data" class not all "outer-data" classes. This aspect works properly currently.
How can I get around this? Here is my code -
$('.outer-toggler').click(function() {
$(this).parent().find('.outer-data').toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).parent().find('.inner-data').toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
I found this issue which looks similar, but in my situation the link is hidden by default whereas his dropdown boxes are not, so his changes were still triggering the event at least - Nested jQuery toggle statements
Use $(this).next().toggle(); as the toggle target is the next sibling
$('.outer-toggler').click(function() {
$(this).next().toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).next().toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
Related
I created simple CSS menu with only one dropdown submenu, which has to be opened on pageload ONLY on homepage, and keep it closed by default on rest of site pages.
I managed to set dropdown menu to be opened by default on pageload with Javascript (and closed onclick), and this works perfectly.
<!-- MENU -->
<div class="divBg">
<!-- BUTTON 1 -->
<div class="dropdown">
<button class="dropbtnMain" onclick="document.getElementById('dropdown').style.display=='none' ? document.getElementById('dropdown').style.display='' : document.getElementById('dropdown').style.display ='none';">Dropdown categories</button>
<!-- BUTTON 1 DROPDOWN CONTENT -->
<div class="dropdown-content" id="dropdown">
<a href=#>Dropdown link 1</a>
<a href=#>Dropdown link 2</a>
<a href=#>Dropdown link 3</a>
</div>
</div>
<!-- BUTTON 2 -->
<div class="dropdown">
<button class="dropbtn">Category 2</button>
</div>
<!-- BUTTON 3 -->
<div class="dropdown">
<button class="dropbtn">Category 3</button>
</div>
</div>
But is there solution to have dropdown opened ONLY on homepage, and closed by default on all other pages?
So you can do it by add css class:
.is-hidden {
display: none;
}
and then in JavaScript you can base on page that is loaded:
if (window.location.pathname !== '/') {
document.querySelector('.dropdown').classList.add('is-hidden');
}
If you're using seperate html files you could just remove the javascript?
But I'm guessing, although not specified you're including the dropdown file in your other pages you can use a javascript function with location.pathname, to check what the filename is and only run it then
This as your onclick.
onclick="foo()"
This is the function to go at the top in a script area or script file.
function foo(){
if(location == "http://foobar.com"){
//Code to open your drop down
}
}
something like this.
You can give your body tag a class of 'home' and then add the following CSS.
body.home .dropdown{display:block;}
This should do the trick.
Try this CSS code.
#dropdown
{
display: none;
}
body.home #dropdown
{
display:block;
}
I would add an id and a class to the body like this:
<body id="home" class="home">
...
</body>
And then I would check if body has this selector:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
if(hasClass(document.getElementById("home"), "test")){
//do something
}
When the mouse click, I need to hide the link and show another div.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
I just use simple hide method. But how can I show my "hello" div after the link hide?
Since jQuery is used bind the event handler using it instead of ugly inline click handler.
You need to hide() the current element, then Class Selector ('.hello') can be used to display the other div.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide();
$('.hello').show();
})
});
.hello {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
As per current HTML, you can use .next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide().next().show();
})
});
You can use the following code:
$(function() {
$('.test').click(function() {
$('.test').hide();
$('.hello').show();
});
})
.hello {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();$('.hello').show();">
Fetch from link
</a>
</div>
<div class="hello" style="display: none; ">Hello world</div>
You must move the div outside because you are hiding the div containing your "Hello world" text.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).hide().siblings('.hello,.second-class,.third-class').show();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
You are hiding the whole div containing both the elements. Hide link only.
Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!
Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.
You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
I would like to be able to click on a link and for it to show the div section, is there an easy jQuery solution?
e.g. click on one will show div-one, and hide div-two & div-three, click two will show div-two and hide div-one and div-three
<div class="div-one" >
one
</div>
<div class="div-two" style="display: none">
two
</div>
<div class="div-three" style="display: none">
three
</div>
one
two
three
If your anchor only has one class then you can do:
$('a').click(function(e) {
e.preventDefault();
var cls = $(this).prop('class');
$('.div-'+cls).show().siblings('div').hide();
});
Fiddle Demo
or give your anchor a data attribute:
one
two
three
then you can do:
$('a').click(function(e) {
e.preventDefault();
var cls = $(this).attr('data-target');
$('.'+cls).show().siblings('div').hide();
});
Fiddle Demo
try this
one
two
three
<script>
function show_div(el){
$('.div-'+el.className).toggle(); // toggle could be replaced with show()/hide()
}
</script>
Check Live jsFiddle
HTML
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Menu1</div>
<div id="div2" class="targetDiv">Menu2</div>
<div id="div3" class="targetDiv">Menu3</div>
<div id="div4" class="targetDiv">Menu4</div>
JQuery
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
You can achieve your goal easily using jQuery. Please find the way to do this below -
jQuery("a").click(function() {
jQuery("div").hide();
if(this.className == 'one')
jQuery(".div-one").show();
if(this.className == 'two')
jQuery(".div-two").show();
if(this.className == 'three')
jQuery(".div-three").show();
});
Try Demo -
http://jsfiddle.net/yrM3H/1356/
You can use show() and hide() functions in jquery to achive this.
$(".div_name").hide(); // to hide div
$(".div_name").show(); // to show div
You can use css class for this:
I have used same class for anchor and corresponding div. I have used 2 css classes(hide and show).
when some click in the anchor tag:
-- i have removed show class of previous div and added hide class.
-- i have added show class and removed hide of corresponding div by class name.
HTML:
<div class="div-one show" >
one
</div>
<div class="div-two hide" style="display: none" >
two
</div>
<div class="div-three hide" style="display: none">
three
</div>
one
two
three
JQUERY:
$(document).ready(function(){
$("a[class^='div-']").click(function(e){
e.preventDefault();
strClass= $(this).attr('class');
$(".show").removeClass("show").addClass("hide");
$("div."+strClass).removeClass("hide").addClass("show");
})
});
jsFiddle