CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
markjason72
markjason72

Reputation: 1653

using jquery to hide and show elements

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

Upvotes: 0

Views: 415

Answers (3)

user180100
user180100

Reputation:

Your selectors are wrong, see http://jsfiddle.net/j9Zy4/ for a working version of your code.

Upvotes: 2

bevacqua
bevacqua

Reputation: 48566

Your selectors are wrong. They should be:

$('.myjsdemo .showaddcommentformlink')

and

$('.myjsdemo .hideaddcommentformlink')

and

$('.myjsdemo .form')

using them in the .selector.another form, you are targetting elements with both classes.

i.e:

<span class="myjsdemo form">

when you add an space, you are targetting elements with the selector after the space, that are contained by elements with the selector before the space.

i.e:

elements with the class "form" that are contained by elements with the class "myjsdemo"

Upvotes: 2

Efran Cobisi
Efran Cobisi

Reputation: 6484

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;
        }
    );
});

Upvotes: 2

Related Questions