http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>
Related
I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?
Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.
you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps
<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/
In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
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 2 divs with different content. I want to show the related div when I click on the link. It's showing both divs at the moment and it was supposed to show only the related one.
jsfiddle
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$('div.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
HTML
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is one!</p>
</div>
<br/><br/>
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is two!</p>
</div>
Make the script understand its relation. Change it to:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$this = $(this);
$('div.tip-2').fadeOut(200, function () {
$this.next('div.tip-2').fadeIn(200);
});
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
Fiddle: http://jsfiddle.net/praveenscience/g25hsdw6/4/
Try this
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next().fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
updated Fiddle
Please try this:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next('.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
http://jsfiddle.net/Rino_Raj/g25hsdw6/5/
I have got 2 rows of html.
One row contains plain html and another row contains ul li lists.
First case:
On page load I want to change the text color of row one depending on which li is active.
Second Case
On click any li from second row, I would like to change the color of first row html depending on what data I have clicked in second row.
My code
First row
<div class="horizontal-link">
<div class="test">
<h4 data-id="1">Text 1</h4> <!--So on page load I would like to change the color to red as related with row 2 ul li) -->
</div>
<div class="test">
<h4 data-id="2">Text 2</h4>
</div>
</div>
Second Row
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
I have tried and created a jsfiddle as demo:
Any help is highly appreciated. Thanks in advance.
You can use .filter() or attribute-selectors to check the data-id like this
jQuery
$(function(){
//Adds class on load depending on which is active
$('.test h4[data-id="'+$('ul li.active').data('id')+'"]').addClass('active');
//Adds class on click
$('li.tab').on('click',function(){
$('.test h4').removeClass('active');
$that = $(this);
$('.test h4').filter(function(){
return $(this).data('id')==$that.data('id')
}).addClass('active');
//removes class on clickable li and adds to clicked
$(this).addClass('active').siblings().removeClass('active');
});
});
CSS
.test h4.active {
color:red;
}
You need to change the css so it checked the h4 if has the class active
DEMO
You can either change text color of div or h4 by adding active class.
For div with active class use below jQuery
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
$("li.tab").click(function () {
$('.active').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
});
});
DEMO
For h4, you need to change CSS like below
CSS :
.test h4.active {
color:red;
}
jQuery :
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
});
});
DEMO
Look at the JS fiddle here. I hope this will help you.,
Updated jQuery:
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
});
});
JS Fiddle:
http://jsfiddle.net/v1v1tqzs/34/
There is a change in your CSS :-
.test .active {
color:red;
}
you wrote it as .test.active . There should be a gap . That's why on page load the color:red was not getting implemented .
YOUR UPDATED FIDDLE:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
$("li.tab").click(function () {
var id = $(this).attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
}
});
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
});
});
Try this , code can be optimized
HTML:
<div class="horizontal-link">
<div class="test">
<h4 class = "1" data-id="1">Text 1</h4>
</div>
<div class="test">
<h4 class = "2" data-id="2">Text 2</h4>
</div>
</div>
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
CSS :
.test.active {
color:red;
}
.tab {
cursor:pointer;
}
ul li.tab {
list-style:none;
display:inline-block;
width:50px
}
.active {
color:red;
}
JS:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
if ($('.horizontal-link h4').attr('data-id') == id) {
$('.'+id).addClass('active');
}
});
$(".tab").click(function () {
$(".tab").removeClass('active');
$(this).addClass('active');
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.'+id).addClass('active');
});
I'm using this code to show/hide multiple divs: FIDDLE
HTML
<ul class="fade_text">
<li><h4>Was ist ein Teleskop?</h4>
<div id="astro-1" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Lichtsammelvermögen</h4>
<div id="astro-2" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Grenzgröße (der schwächsten erkennbaren Sterne)</h4>
<div id="astro-3" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Auflösung(svermögen)</h4>
<div id="astro-4" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Vergrößerung</h4>
<div id="astro-5" class="showHideDiv">
Some Content
</div>
</li>
</ul>
JS
$(document).ready(function () {
function showHideDivs() {
$('.showHideDiv').each(function () {
if ($(this).prevAll('a.toggle:first').hasClass('expanded')) {
$(this).show();
} else {
$(this).hide();
}
});
}
$('a.toggle').click(function () {
var addExpanded = !$(this).hasClass('expanded');
$('a.toggle').removeClass('expanded');
if (addExpanded) {
$(this).addClass('expanded');
}
showHideDivs();
});
showHideDivs();
});
Everything is working fine.
My question: I want to hide the link f.e. "Lichtsammelvermögen" after the link is clicked and the text container is shown.
How can I do that?
you can add a hide() call
$(this).hide();
if you want to re-show it when clicking another header you can do this too:
$('a').show();
$(this).hide();
example: http://jsfiddle.net/7pXpK/11/
http://jsfiddle.net/7pXpK/10/
Write $(this).hide() when addExpanded is false.
$('a.toggle').click(function () {
var addExpanded = !$(this).hasClass('expanded');
if (addExpanded) {
$(this).addClass('expanded');
} else {
$('a.toggle').removeClass('expanded');
$(this).hide();
}
showHideDivs();
});