Currently, clicking on the h2 tag toggles the div with slideToggle. However, I'm trying to also fade in and out the .hint_text_heading that exists within the h2 tag. So, originally, what I tried to do at least, I am adding an .active class to the h2 tag thats open, then fading in the .hint_text_heading. However, I can't get .hint_text_heading to fade out when I close the div.
Any suggestions? Thanks!
html
<h2 class="collapsible_head">This is a title.<span class="hint_text_heading">This is a hint.</span></h2>
<div>
This is the toggled content.
</div>
jquery
$(document).ready(function(){
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).next().hide();
});
UPDATE/
Here's an example in jsFiddle. As you can see, the div toggles, and the hint text fades in, however, when the div is hidden, the hint text remains. I am trying to get that to fade out:
http://jsfiddle.net/UGHgx/
I think this is what you are wanting:
CSS:
span.hint_text_heading { display: none; }
jQuery:
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
//$(this).toggleClass('active');
$('span.hint_text_heading', this).fadeToggle();
}).next().hide();
How about this:
$(function(){ /* shorthand for $(document).ready(function(){ */
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
$('h2:not(.active) span.hint_text_heading').fadeOut();
}).next().hide();
});
Edit:
I would also recommend removing $('span.hint_text_heading').hide(); and just putting display:none; as a style, this is extra javascript where it isn't needed.
Do you want this;
$(document).ready(function(){
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).children('.hint_text_heading').fadeOut().end().next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).next().hide();
});
If not, please comment me and I'll try to give you solution.
Well, the quick and dirty solution:
http://jsfiddle.net/CpVSC/12/
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
if($(this).hasClass('active')){
$('.hint_text_heading').fadeOut();
}else{
$('span.hint_text_heading',this).fadeIn();
}
$(this).toggleClass('active');
}).next().hide();
Working code (tested):
$(document).ready(function() {
$('h2.collapsible_head').click(function() {
$('h2.active span.hint_text_heading').hide();
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).children().hide().end().next().hide();
});
Here's the fiddle:
http://jsfiddle.net/UGHgx/3/
I will go with animation callbacks.
Example: http://jsfiddle.net/X99Z6/
Related
I have a dropdown menu that shows with the following jQuery script:
jQuery(document).ready(function($) {
$('#block-mln-main-menu li').click(function(){
$(this).find('.test').toggle();
});
});
What I want to achieve is when the user clicks anywhere else on the page, it slides up or hides. I am literally at a loss on how to achieve this.
Any help is greatly appreciated.
added a fiddle : http://jsfiddle.net/aL7Xe/999/
Yoy can try stop propagation event.
CSS:
.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}
HTML
<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>
JQUERY
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
Toggle will only work it user click on the same object it you want to hide it when click elsewhere try
jQuery(document).ready(function($) {
$(this).not('#block-mln-main-menu li').click(function(){
$(this).find('.test').hide();
});
});
What I understand is that you want to show dropdown menu when an user clicks on it. If the user again clicks on it or anywhere on the page it should close.
CSS
.hide {
display: none;
}
JS
$('.menu-label').on('click', function() {
$('.drop-down-menu').toggleClass('hide');
});
To hide the menu when user click anywhere on page
$('body').on('click', function() {
$('.drop-down-menu').addClass('hide');
});
I have the following script in my page to close out a dropdown submenu when the close button is clicked:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".closebutton").click(function() {
clearTimeout();
var c = $(this).closest("li");
c.find(".dropdown").css("left", "-9999px")
});
});
</script>
Once the "close button" is pressed, the dropdown no longer appears again when I hover over the parent li since the css has been changed to "left: -9999px". What script should I add that returns the css to "left: 0px;" again when I hover once more on the parent li without reloading the page?
Thanks!
This finds the closest li to the close button, and when its hovered finds the .dropdown element and sets the .dropdown to left: 0.
$('.closebutton').closest('li').hover(function() {
$(this).find('.dropdown').css('left', '0px');
});
You could use the $.mouseover() event and change the left property back to 0px. It would look something like this:
'<script type="text/javascript">
$(function() {
$(".closebutton").mouseover(function() {
var d = $(this).closest("li");
d.find(".dropdown").css("left", "0px");
});
});
</script>'
Hope that helps!
Try using the .show() and .hide() events in jQuery rather than changing the css and the .hover() to execute the .show().
c.find(".dropdown").hide();
I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle
I've this code
$('a').click(function() {
$('a span').first().addClass('hide');
$('a span:nth-child(2)').removeClass('hide');
$('a span:nth-child(2)').addClass('display');
});
.hide {
display:none;
}
.display {
display:block;
}
<a href="#">
<span>Hello</span>
<br>
<span class="hide">World</span>
</a>
When I click on the link I want the first span hide and the 2nd span appears.
I want to do it multiple times (click on this link multiples times and have the same result).
I try to do it with this Jquery code
I would just toggle the classes
and you have to prevent the default on the link so it doesn't try to leave the page.
$('a').click(function(e) {
e.preventDefault();
$('a span').toggleClass('hide show');
});
here is a work demo
I would do something like this. Loop through the children of the a and swap their classes. Doing this method allows you to do other things as well as just toggle the class like adding text/css attributes to the span's.
$('a').click(function() {
$(this).children().each(function(index, element)
{
if ($(this).hasClass('hide'))
{
$(this).removeClass('hide');
$(this).addClass('display');
}
else
{
$(this).removeClass('display');
$(this).addClass('hide');
}
});
});
Here is a JS Fiddle of the code above
This should do what you are looking for:
HTML:
<a class='hide-clicker' href="#">
<span>Hello</span>
<span class="hide">World</span>
</a>
jquery:
$("a.hide-clicker").click(function(e) {
e.preventDefault();
$(this).find('span').toggleClass('hide');
});
CSS:
.hide {
display:none;
}
I have just trying to come up with a button to hide content based on a example I've seen that works.
HTML
<button id="button">Test</button><br/><br/>
<div id="panel">Test Panel</div>
jQuery
$(document).ready(function(){
$("#button").toggle(function() {
if $("#panel").css("display") == "none" {
$("#panel").html("Show");
} else {
$("#panel").html("Hide");
};
});
});
CSS
#panel {display:none;}
Any help is appreciated. Thank you!
Toggle is deprecated.. Just attach a click event to the button and use the toggle method for the panel
$("#button").click(function() {
$("#panel").toggle();
});
Check Fiddle