CODEWITHSUNDEEP
jquery
H. Ferrence
H. Ferrence

Reputation: 8116

How to Toggle in jQuery

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]

Upvotes: 1

Views: 298

Answers (3)

Skatox
Skatox

Reputation: 4284

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.

Upvotes: 1

Chris Miller
Chris Miller

Reputation: 493

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.

Upvotes: 1

mr_lewjam
mr_lewjam

Reputation: 1190

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

Upvotes: 1

Related Questions