Home/ Questions/Q 6548429
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T11:58:15+00:00

I have a webpage with a form for posting comments( a textfield and a

  • 0

I have a webpage with a form for posting comments( a textfield and a textarea + submit button).I wanted the form to be invisible at first and show only a ‘showform’ link to make the form visible as well as to show the ‘hideform’ link.When ‘hideform’ link is clicked ,the form & the hideform link should be made invisible ,and the showform link should be made visible again.
I tried this

<html>
<head>
<title>formopen demo</title>
<link href="formopen.css" type="text/css" rel="stylesheet">
</head>
<script src="jquery-1.4.2.js"></script>
<script src="formopen.js"></script>


<body>
<div class="myjsdemo">
   <a href="#" class="showaddcommentformlink">show add commentform</a>
   <a href="#" class="hideaddcommentformlink">hide add commentform</a>
   <div class="form">
      <input type="text" value="" name="myinput" id="myinput"/>
      <textarea name="content" rows="2" cols="20" id="content" > </textarea>
   </div>
</div>

</body>
</html>

formopen.css

.myjsdemo .form{display:none;}
.myjsdemo .hideaddcommentformlink{display:none;}

formopen.js

$(function(){
    $('.myjsdemo.showaddcommentformlink').click(
      function(){
            $(this).hide();
            $('.myjsdemo.hideaddcommentformlink').show();
            $('.myjsdemo.form').show();
            return false;
        }
    );

    $('.myjsdemo.hideaddcommentformlink').click(
      function(){
            $(this).hide();
            $('.myjsdemo.showaddcommentformlink').show();
            $('.myjsdemo.form').hide();
            return false;
        }
    );

});

However nothing happens when I click on the link…I have very minimal knowledge of javascript ..If someone can correct any mistakes in this code ,it would be a great help..

I am putting all files in the same directory and opening the html file in firefox.

thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try to add a space between the CSS classes.

    .myjsdemo.showaddcommentformlink

    Should be

    .myjsdemo .showaddcommentformlink

    And so on. Otherwise jQuery will grab elements that have both the classes applied at the same time.

    The final function should be like this one:

    $(function(){
    $('.myjsdemo .showaddcommentformlink').click(
      function(){
            $(this).hide();
            $('.myjsdemo .hideaddcommentformlink').show();
            $('.myjsdemo .form').show();
            return false;
        }
    );

    $('.myjsdemo .hideaddcommentformlink').click(
      function(){
            $(this).hide();
            $('.myjsdemo .showaddcommentformlink').show();
            $('.myjsdemo .form').hide();
            return false;
        }
    );
});
    • 0