I have the code below that clicking on an image hides a div.
Works perfectly, but does not work in IE ...
Why?
http://jsfiddle.net/mtsys/6qAfp/
codes:
$(document).ready(function () {
$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
$('.mais').click( function() {
var status = $(".nav").attr("hidden");
if (status)
{
$(".nav").attr("hidden",false);
}
else
{
$(".nav").attr("hidden",true);
}
});
});
HTML:
<div class="header">
Estágio
<div class="mais"></div>
</div>
<div class ="parent">
<div class="content">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>
</div>
tks
Use .hide() and toggle() to change the display of the elements
$('.fechar').click(function () {
$(".nav").hide()
});
$('.mais').click(function () {
$(".nav").toggle()
});
Demo: Fiddle
Why not change your JS to:
$('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
$('.mais').click( function() {
$(".nav").toggle();
});
This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...
Related
I have several DIV elements nested under a parent container. When the user clicks on one of these cp-anchor, I want to modify the CSS on a different one cp-content. I've tried dozens of methods found on Stack Overflow but for some reason it just doesn't seem to work as expected. Can anyone help point me in the correct direction?
Here is a JSFiddle of the example I am using.
<script type="text/javascript">
$( document ).ready(function()
{
$('.cp-anchor').click(function(e)
{
e.preventDefault();
$(this).parent().find('cp-content').css('max-height','none');
$(this).remove();
});
});
</script>
<div class="cp-container">
<div class="cp-content">
<table id="tablepress-4">
</table>
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>
You need a . to signify a class selection.
// v
$(this).parent().find('.cp-content').css('max-height','none');
$(document).ready(function() {
$('.cp-anchor').click(function(e) {
e.preventDefault();
$(this).parent().find('.cp-content').css('max-height', 'none');
$(this).remove();
});
});
.cp-content {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
<div class="cp-content">
CP CONTENT
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>
Here's a vanilla JS version:
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.cp-anchor')
.forEach(el => el.addEventListener("click", showContent));
function showContent(e) {
e.preventDefault();
this.parentNode.querySelector('.cp-content').style.maxHeight = 'none';
this.remove();
}
});
.cp-content {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
<div class="cp-content">
CP CONTENT
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>
in Js use following one line of code:
$(this).parent().find('.cp-content').css('max-height','none');
I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it
Here is the Jsfiddle: https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
See DEMO
Please use this code:
$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
hideTitle($(this))
});
function showTitle(target) {
target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
if (!showAllFlag) {
target.find('h1').stop().fadeOut();
}
}
function showAllTitles() {
$('.info-box h1').show();
showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);
});
Or follow by this link: enter link description here
Change your function to this:
$(function() {
$('#div1').hover(function() {
$('#div1h1').fadeIn();
});
});
$(function() {
$('#div2').hover(function() {
$('#div2h2').fadeIn();
});
});
$(function() {
$('#div3').hover(function() {
$('#div3h3').fadeIn();
});
});
Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.
Just don't trigger the fadein if its already visible?
$('#div1').not(":visible").hover(function() {
$('#div1h1').fadeIn();
},
edit - My bad i didn't see that comma :), gimme a second
So I got :
var current = $('.article.active');
$('div').on("click", function() {
if(current.next('.article').hasClass('hide')){
$(current).addClass('hide');
$(current).next('.article').removeClass('hide');
};
});
And Html:
<body>
<div class="app">
<div id="article0" class="article active"></div>
<div id="article1" class="article hide"></div>
<div id="article2" class="article hide"></div>
</div>
So when I click on the div the code works, but only once. I want to be executed multiple times for every div.
JSFIDDLE: http://jsfiddle.net/9xrpuru9/
You need to find the active element in the click handler, also the active class also have to be changed
$('div.app').on("click", function () {
var current = $('.article.active');
$(current).addClass('hide').removeClass('active');
if (current.next('.article').length) {
$(current).next('.article').removeClass('hide').addClass('active');
} else {
$('.article:first').removeClass('hide').addClass('active');
}
});
Demo: Fiddle
You are not setting the active class to the next article div.
You can try the following code.
$('.article').on("click", function () {
if ($(this).next('.article').hasClass('hide')) {
$(this).addClass('hide').removeClass('active');
$(this).next('.article').removeClass('hide').addClass('active');
};
});
I want to make the #test element display:block; after clicking on the #button element.
And if I click again I want the #test element to be display:none;.
<body>
<div id="content-wrapper">
<!-- header -->
<header id="top">
<!--- Nav-bar -->
<div id="button">
</div>
</header>
<div id="test">
This is my jQuery code:
$(function() {
$('#button').on('click', function () {
if ($('#test').css("display","block")) {
$('#test').css("display","none");
} else {
$('#test').css("display","block");
}
});
});
I have no idea why it won't work!
.toggle() is okay - but using css classes will give you better control ( say using CSS transitions in the future ) ( stops inline styling, but does the same job )
CSS
#test { display:none; }
#text.on { display:block; }
JS/JQUERY
$('#button').on('click', function () {
$('#test').toggleClass('on');
});
Use .toggle()
Display or hide the matched elements.
$(function () {
$('#button').on('click', function () {
$('#test').toggle();
});
});
if ($('#test').css("display","block")) {
you are setting displayto block instead of checking so it always be true.
if condition should be [FYI]
if ($('#test').css("display") == "block") {
just a small change
$(function() {
$('#button').on('click', function () {
if ($('#test').css("display") === "block") {
$('#test').css("display","none");
} else {
$('#test').css("display","block");
}
});
});
although using jQuery toggle() function will save you some time.
I am currently using jQuery toggle to toggle between show and hide. It works perfectly fine for individual elements. When I try to do a expand all and collapse all it works fine for all the condition except one. If any individual element is already expanded or collapsed it does toggle them but not as expected. That is, when I click on expand all it expands all the elements except the individual element which is already expanded get collapsed and vice-versa. How do I take care of this condition?
<script type="text/javascript">
$(".toggle_container").hide();
$("div.description-content-title").toggle(function () {
$(this).addClass("collArrow");
}, function () {
$(this).removeClass("collArrow");
});
$("div.description-content-title").click(function () {
$(this).next(".toggle_container").slideToggle("slow");
});
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
</script>
HTML:
<div class="news-top-head">
<div class="time-head sortable" data-sort-column="ContentDate">
<span style="float: left; width: auto;">Time</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="description-head sortable" data-sort-column="ContentTitle">
<span style="float: left; width: auto;">Description</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="close-all">
close all
</div>
<div class="clear">
</div>
</div>
<div class="description-content">
<div class="description-content-title expArrow"><%=breakingNews[index].ContentTitle%></div>
<div class="toggle_container">
<p ><%=breakingNews[index].ContentDescription%></p>
</div>
</div>
</div>
If you have any code sample it would be really helpful.
You can't use toggle for your close-all button in that case unless you add an extra class to something to figure out which the odd one out is and ignore it. Easiest way to make this work is to use slideDown() and slideUp() instead of slideToggle(). Remove the following code:
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
And change:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
To:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
$(".toggle_container").slideDown("slow");
}, function () {
$(".close-all a").text("[Close All]");
$(".toggle_container").slideUp("slow");
});
Check out this code if useful,
jQuery(document).ready(function($) {
$("#toggle_container").hide();
});
function showSlidingDiv(){
$("#toggle_container").animate({"height": "toggle"}, { duration: 500 });
}
Also can refer to Show-Hide div content using jQuery if required..