How to Toggle in jQuery

Question

I want to click a button (or in my example below, a link) and toggle between 2 blocks of content to essentially go from displaying content to editing content.

I have the following snipits of code:

<style type="text/css">
    div.show {display:block;}
    input.hide {display:none;}
</style>

<a href="#">edit</a> <!--not sure what my jquery should look like to do toggling-->
<div class="show" id="d-01-on">Some content</div>
<input class="hide" id="d-01-off" name="d-01" value="Some content" />

Thanks for helping.

[see How to Streamline and Compress Repetitive jQuery Code for expansion to this techique]

Skatox · Accepted Answer · 2012-10-31 12:52:18Z

1

It is easy with jQuery just add the following JS code:

$(document).ready(function(){
   $('#button').on('click', function() {
        $('#d-01-on').toggle();
        $('#d-01-off').toggle();
   });
})

And it will work with your current markup and css code.

answered Oct 31, 2012 at 12:52

Skatox

4,27412 gold badges47 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

H. Ferrence Over a year ago

if you have a moment @Skatox could you take a look at my follow-on problem at stackoverflow.com/questions/13159735/… ? Thanks.

mr_lewjam · Accepted Answer · 2012-10-31 12:49:06Z

1

to show and hide an element using jquery is done as follows:

HTML:

<div id="d-01">content</div>

Javascript:

$.("#d-01").toggle(); //toggles display so if shown then hides, if hidden then shows;
$.("#d-01").show();  //shows div
$.("#d-01").hide();  //hides div

answered Oct 31, 2012 at 12:49

mr_lewjam

1,1901 gold badge9 silver badges20 bronze badges

3 Comments

mr_lewjam Over a year ago

also, to trigger this from a hyperlink, wrap the jquery code in a function definition, then give your <a> tag an onclick property with the function's name as its argument

H. Ferrence Over a year ago

Cool, thanks @mr_lewjam...giving it a try now. I'll post back in a few moments.

H. Ferrence Over a year ago

Thanks @mr_lewjam. I worked through this until I saw Skatox's suggestion below. I then tried that one and got it working really quick. So I am going to mark Skatox as the answer, but I really appreciate your suggestion and I am sure I could get it to work with more effort.

Chris Miller · Accepted Answer · 2012-10-31 12:50:55Z

1

This will toggle visibility of both elements:

function handleClick() {
  $('div.show').toggle();
  $('input.hide').toggle();
}

Then of course your class names will be wrong. You could use IDs instead.

answered Oct 31, 2012 at 12:50

Chris Miller

4932 silver badges11 bronze badges

1 Comment

H. Ferrence Over a year ago

Thank you for the suggestion @ChrisMiller. I am going with Skatox below as I got it running really quickly.

Collectives™ on Stack Overflow

How to Toggle in jQuery

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related