hide/show of div class

Question

Hi, I wrote a code to show a div element(shareform) when a link is clicked and to hide it when the link is clicked again. I have many Forms under which this link 'Share' will be displayed. If i have only one Form, this code works fine. That is, initially the 'shareform' element is hidden and when I click the link, it is shown and when I click the link again the 'shareform' is hidden.

If I have 2 forms, the 'shareform' element for the second Form is not hidden initially. Isn't this $('#shareform').hide(); suppose to hide the form for all the Share links?

And also, when I click the second "share" link, the 'shareform' is shown and hidden for the first "share" link. What Am I doing wrong? Can someone help me?

    var flag=0;
    $('#shareform').hide();
    $(".Share").click(function(){
  if(flag==1){
   $('#shareform').hide('fast');
   flag=0;
  }
  else{
      $('#shareform').show('slow');
  flag=1;
      return false;
  }

  });//.Share click

 $("#shareform .button").click(function(){
  $("#userList option:selected").each(function(){
   selected_value[i]=$(this).val();
     alert(selected_value[i]);
   i++;
  });
 });

   <li id="Share<?php echo $r['Form']['id']?>">
   <a href="#" class="Share">Share</a>
   <form action="/cake_1_2/forms/share/<?=$formid?>/<?=$userid?>" method="post" name="shareform" id="shareform">

   <p>Select the users with whom you want to share the Form</p>
   <select id="userList" name="userList" multiple>
   <?php foreach($users as $user){  ?>
   <option value="<?=$user['User']['name']?>"><?=$user['User']['name'];?></option>

   <?php }?>
  </select> 
  <input type="submit" class="button" value="Share"/>
 </form> 
</li>

EDIT: I'm sorry, actually i want to hide only the id element share_form,not the class 'Share' coz that class refers to the link alone. also i changed share_form to shareform,it still doesnt work.

EDIT 2:

Ok, I've changed id to class,i.e class='shareform'. Now the shareform class is hidden initially. But if I click the 'Share' link, the 'shareform' class is showed for both the forms.

Answer 1

For hide/fade interaction I recommend you to use the Effects/toggle function.

$('#share_form').hide();

The above line, will hide the element with the id="share_form", the entire form element.

Answer 2

# is actually jQuery shorthand for 'ids'. To hide a class, change the # to ., as in .Share, and try again.

Answer 3

Are you sure you're assigning different IDs to the different share divs in the different forms?

This line in your question leads me to believe you're not:

If I have 2 forms, the Share class for the second Form is not hidden initially. Isn't this $('#share_form').hide(); suppose to hide the class for all the Share links?

Also, that line won't hide the class for the share divs since you are only targeting a specific ID with the "#" sign. To target the share divs with class share you'll want to use $('.Share').hide();

EDIT 2: Both divs are showing because you are targeting both of them by the class designation. Instead you want to target them individually by ID. You'll want to change this line $(".Share").click to $("#Share1").click and then add another function for $("#Share2").click.

Answer 4

The first thing I see is that "share_form" is with underscore, sometimes jQuery cannot select a element with underscore, try with "share-form".