how do i toggle visibility with jquery?

colak · 2009-08-30 08:45:16

I’m trying to toggle the visibility of 2 divs (same class, different ids) using jquery but I’m hitting walls left right and centre.

the poroblem is that I do not want the elements to use display:none as I prefer visibility:hidden. This is because the later should not affect the layout when the visibility is toggled whereas the first does.

Anyone knows of a js script (preferably jquery) which can do this?

solution here

the_ghost · 2009-08-30 09:19:02

Really don’t understand why display:none doesn’t fit you, but you can manually change requered css porperty:
$(".mydiv").css("visibility", "hidden");

Or, if you need smooth hiding, you can rewrite css property after animation:

$(".mydiv").hide(500)
	.css("visibility", "hidden")
	.css("display", "");

Or use more short code:

$(".mydiv").hide(500).css({visibility: "hidden", display: ""});

colak · 2009-08-30 09:28:21

Hi victor,

Thanks for the prompt reply. You code hides but it does not toggle the visibility of the div.

the reason I prefer hidden to none can be best demonstrated here which is a js I eventually found but have not managed to make it work on both divs yet.

colak · 2009-08-30 09:57:12

getting there… This is what I currently have in the head

<script type="text/javascript"> 
$(document).ready(function(){
$(".togglediv").toggle(
function () {
$(this).css({"visibility":"hidden"});
},
function () {
$(this).css({"visibility":"visible"});
},
function () {
$(this).css({"visibility":""});
}
);
});
</script>

When I click on the divs they hide but I cannot get them to show again.

Is there a way to have a show/hide link which picks up from the js and toggles the visibilities?

colak · 2009-08-30 12:14:47

Another problem with the above code.

The toggledivs contain links which are now unclickable as the divs hide before the link action occurs.

Any ideas?

jakob · 2009-08-30 15:03:49

You need separate buttons or links to which you attach a click.

See this show/hide example on the jquery site (the buttons can be links).

An alternative to directly changing the css is to add / remove / toggle a class which you then give the css you want:

$("#target").addClass("newclass");
$("#target").removeClass("newclass");
$("#target").toggleClass("newclass");

This thread might also help you if you want a toggle button to change text from show to hide and back.

colak · 2009-08-30 16:39:02

Hi jakob,

Still can’t get it. Changing the text to show/hide would be great but I am still struggling with the basic functionality. Thought that by allocating a button would do it.

This is what I have

<script type="text/javascript"> 
$(document).ready(function(){
$(".togglebutton").click(function(){ 
$(".togglediv").toggle(
function () {
$(this).css({"visibility":"hidden"});
},
function () {
$(this).css({"visibility":"visible"});
},
function () {
$(this).css({"visibility":""});
}
);
});
});
</script>

and I try to activate it with a link

<a href="#" class="togglebutton">Toggle</a>

nada:(

colak · 2009-08-30 18:23:34

Almost there!!! I mean it this time:)

<script type="text/javascript"> 
$(document).ready(function() {  
$(".togglebutton").toggle(function() {
$(this).html("Show");
$(".togglediv").css({"visibility":"visible"});
}, function() {
$(this).html("Hide");
$(".togglediv").css({"visibility":"hidden"});
});
});
</script>

and I call it with <a href="#" class="togglebutton">Hide</a>

Only problem is that when the page loads the Hide lnk shows OK. I click it once and nothing happens except that the link text changes to Show.

On clicking again it hides the divs and the link text changes to Hide.

Basically the Show/Hide are reversed due to the need of a double click in the beginning

Can someone point to me where I’m screwing up?

colak · 2009-08-30 18:48:12

Solved:)
A bug? maybe, but I turned it into a feature:)

For those who might want to use it here’s the final code

<script type="text/javascript"> 
$(document).ready(function() {  
$(".togglebutton").toggle(function() {
$(this).html("Hide");
$(".togglediv").css({"visibility":"visible"});
}, function() {
$(this).html("Show");
$(".togglediv").css({"visibility":"hidden"});
});
});
</script>

The difference from the script on my previous post is that I swapped the Hide/Show texts:)

I wish I knew more about javascript as the little snippet above took the best part of my day today.

colak · 2009-09-04 09:22:54

A few days later and the solution is finally here:)

In the <head>

<script type="text/javascript">
$(document).ready(function() {
$('.togglebutton').click(function() {
$('.togglediv').toggleClass('hidden');
$('.togglebutton').toggleClass('nodisplay');
});
});
</script>

In the <body>

<a href="#" class="togglebutton">Hide</a><a href="#" class="togglebutton nodisplay" style="display:none;">Show</a>

you can of course move the inline style in your css.

Textpattern CMS

Textpattern CMS support forum

#1 2009-08-30 08:45:16

how do i toggle visibility with jquery?

solution here

#2 2009-08-30 09:19:02

Re: how do i toggle visibility with jquery?

#3 2009-08-30 09:28:21

Re: how do i toggle visibility with jquery?

#4 2009-08-30 09:57:12

Re: how do i toggle visibility with jquery?

#5 2009-08-30 12:14:47

Re: how do i toggle visibility with jquery?

#6 2009-08-30 15:03:49

Re: how do i toggle visibility with jquery?

#7 2009-08-30 16:39:02

Re: how do i toggle visibility with jquery?

#8 2009-08-30 18:23:34

Re: how do i toggle visibility with jquery?

#9 2009-08-30 18:48:12

Re: how do i toggle visibility with jquery?

#10 2009-09-04 09:22:54

Re: how do i toggle visibility with jquery?

Board footer