Attach (show/hide text) dynamically and when clicked show/hide a fieldset below

Question

Hi All,

I want to attach (show/hide text) dynamically to a span and when clicked on that particular text, i want to have show/hide effect on a fieldset below. I acheived the task of having show/hide text appended to span. But the problem arises when i click on that text. Nothing happens except the text beside span gets changed.

HTML:

<span>Store Dropdown</span>
<fieldset id="fieldset-store" class="showHide">
    <legend>Choose by item:</legend>
    <label for="prodtype">Type:</label>
    <select name="prodtype" id="prodtype">
     <option value="0" selected="selected">Choose type</option>     
     <option value="1"> Sample1</option>
     <option value="2"> Sample2</option>
     <option value="3"> Sample3</option>
     <option value="4"> Sample4</option>
    </select> 
    <label for="brandtype">of:</label>
    <select name="brandtype" id="brandtype">    
     <option value="0" selected="selected">Choose brand</option>     
     <option value="1"> Brand1</option>
     <option value="2"> Brand2</option>
     <option value="3"> Brand3</option>
     <option value="4"> Brand4</option>
    </select>
    <label for="prodprice">Price:</label> <input id="prodprice" name="prodprice" value="" type="text">
</fieldset>

JS Code:

$(document).ready(function(){
    $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
    $(".showHide").hide();
    $('a.showHideLink').click(function() {
     if ($(this).html()=='Show')
      $(this).html('Hide');
     else 
      $(this).html('Show');
     $(this).next().toggle('slow');
     return false;
    });
});

Pls suggest me what changes i need to make. Thanks in advance

Answer 1

$(document).ready(function(){
      $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
      $(".showHide").hide();
      $('a.showHideLink').click(function() {
       if ($(this).html()=='Show')
         $(this).html('Hide');
       else
         $(this).html('Show');
       $(".showHide").toggle('slow');
       return false;
      });
     });

or

$(document).ready(function(){
          $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
          $(".showHide").hide();
          $('a.showHideLink').click(function() {
           if ($(this).html()=='Show')
             $(this).html('Hide');
           else
             $(this).html('Show');
           $(this).parent().next().toggle('slow');
           return false;
          });
         });