tags:

views:

72

answers:

5
+1  Q: 

Jquery multiple hide show div

Hello,

I have been trying to do this all day. At the end i managed to get it working. I know it is not the best way to do.

Can someone please show me a better way. I need 12 altogether. It does not need to be check box either. It can be just a text. I got the idea from com/2006/12/14/using-jquery-to-show-hide-form-elements-based-on-a-checkbox-selection/

Thanks all.

I managed to upload it on http://utilitybase.com/paste/wmq

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme").click(function(){

        // If checked
        if ($("#checkme").is(":checked"))
        {
            //show the hidden div
            $("#extra").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra1").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme1").click(function(){

        // If checked
        if ($("#checkme1").is(":checked"))
        {
            //show the hidden div
            $("#extra1").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra1").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra2").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme2").click(function(){

        // If checked
        if ($("#checkme2").is(":checked"))
        {
            //show the hidden div
            $("#extra2").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra2").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra3").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme3").click(function(){

        // If checked
        if ($("#checkme3").is(":checked"))
        {
            //show the hidden div
            $("#extra3").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra3").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra4").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme4").click(function(){

        // If checked
        if ($("#checkme4").is(":checked"))
        {
            //show the hidden div
            $("#extra4").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra4").hide("fast");
        }
      });

    });
</script>
</head>

<body>

<div style="width: 800px;">
        <form>

            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme" type="checkbox" />

            <div id="extra">
            <input type="text" name="input" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme1" type="checkbox" />

            <div id="extra1">
            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme2" type="checkbox" />

            <div id="extra2">
            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme3" type="checkbox" />

            <div id="extra3">
            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme4" type="checkbox" /> 

            <div id="extra4">
            <input type="text" name="" maxlength="30" />
             </div>
           </div>
          </div>
         </div>
       </div>
  </form>
</div>
</body>
</html>

A: 

thats nice .

Did you try .each or .live

http://api.jquery.com/each/

http://api.jquery.com/live/

zod  2010-10-29 21:05:57
i am trying to paste the code here but it does not work
baris22  2010-10-29 21:12:55
paste code ... select and use 1010 in that editor
zod  2010-10-29 21:21:17
i am new here....
baris22  2010-10-29 21:31:51
Or select it and hit 'ctrl + K'.
David Thomas  2010-10-29 21:32:09
A: 

Hmm. Looking at your code on UtilityBase. Maybe try using the .siblings() jquery function. Then for the click of the checkbox you can do a $(this).siblings('div').hide()/show();

Aaron Hathaway  2010-10-29 21:38:34
A: 

This usually works for me

$("div[id^='extra']").click(function(){
  $div = $(this);
  divID = $div.attr("id").substring(5);

//Hide div w/id extra
       $div.css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme"+divID).click(function(){

        // If checked
        if ($("#checkme"+divID).is(":checked"))
        {
            //show the hidden div
            $div.show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $div.hide("fast");
        }

});

This should keep you from having to write the same thing multiple timesdiv

sassinak  2010-10-29 21:51:12
i could not get this working.
baris22  2010-10-30 13:00:32
A: 

You could try something like this:

// isolate the first div. You can surely find a better way,
// using classes, containers, etc., but this works for now. 
// Hide all the others.
$('div:has(input):not(:first)').hide();

// For each checkbox, open the next div
$('input:checkbox').click( function(){
  if( $(this).is(':checked') ) {
    $(this).next('div').show('fast');
  } else {
    $(this).next('div').hide('fast');
  }
});
Ken Redler  2010-10-29 21:51:39
A: 

If I got you right, you might play around with

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var prototype = $('.prototype').clone();

      $('.prototype > input[type="checkbox"]').live('click', function() {
        if($(this).is(':checked')) {
          var clone = prototype.clone();
          clone.find('input[type="checkbox"]').attr('checked', false);
          $(this).parent('.prototype').append(clone);
        } else {
          $(this).parent('.prototype').find('.prototype:last').remove();
        }
      });
    });
  </script>
</head>

<body>
  <form>
    <div class="prototype">
      <input type="text" name="" maxlength="30" />
      <label for="checkbox"> Check to enter another email address:</label>
      <input id="checkme" type="checkbox" />
    </div>
  </form>
</body>
</html>

EDIT: This add's a new input/label/checkbox prototype inside the current one or removes it's children on the other hand. You could add ids to the fields as well.

pex  2010-10-29 21:56:58
it works nearly perfect. if you click 4-5 times and try to unclick it and click it again it does not close 1 by one. it closes 3-4 of them and if you click the top one it opens 1 at the end.
baris22  2010-10-30 13:00:14
i'll have a look at it
pex  2010-10-30 15:54:49

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?