CODEWITHSUNDEEP
javascriptjquery
E.E.33
E.E.33

Reputation: 2011

Jquery hide and show

I a building a simple FAQ page on my site. I'd like the question only to be visible, and once the user clicks on the question it should then show the answer. for some reason my code isn't working. Please review my code and tell me what I am doing wrong.

html

<div class="copy" id="about1">
        <h1>The Mission</h1>
        <p>
            content content content

            content content content

            content content content

        </p>

  <h1>The Game</h1>
        <p>
            content content content

            content content content

            content content content

        </p>
 </div>

JS

$(document).ready(function() {
    $('.copy h1').onclick(function(){
          $('.copy p').hide();
        $('this').next('p').show();
    });
});

CSS

.copy p{
  display=none;
}

Upvotes: 0

Views: 307

Answers (5)

Chowlett
Chowlett

Reputation: 46685

There's a few things wrong with what you've pasted. First up, you've got bad CSS syntax. Try:

.copy p { display: none;}

(that is, use a :, not an =).

Secondly, in your javascript, you want to use .click() rather than .onclick(); and $(this) rather than $('this'). Also, jQuery has a short-form of $(document).ready(). Your Javascript should look like:

$(function() {
 $('.copy h1').click(function(){
            $('.copy p').hide();
      $(this).next('p').show(); 
 });
});

Upvotes: 0

Prakash
Prakash

Reputation: 6602

Try this one : it'll toggle the show hide effect for answer with click on question 

$(document).ready(function(){
   $('.copy h1').toggle(function(){
       $(this).next('p').show();
   },function(){
       $(this).next('p').hide();
   })
})

Upvotes: 1

Daniel Wright
Daniel Wright

Reputation: 4604

Two issues. First, in your JS, you've made two mistakes -- onclick() should be click(), and you've wrapped this in single-quotes. It should read:

$(document).ready(function() {
    $('.copy h1').click(function(){
      $('.copy p').hide();
      $(this).next('p').show();
    });
});

Second, in your CSS, the separator between keys and values should be a colon:

.copy p {
    display: none;
}

Upvotes: 2

Zakaria
Zakaria

Reputation: 15070

You have some errors in your code. You will find a correction here: http://jsfiddle.net/fQYLm//

Error 1 : display:none and not display = none

Error 2 : $('.copy h1').live('click',function() { and not .onclick

Error 3 : $(this).next('p').show(); and not $('this')

Regards.

Upvotes: 3

user657496
user657496

Reputation: 

$(document).ready(function() {
    $('.copy h1').bind('click', function(){
        $('.copy p').hide();
        $(this).next('p').show();

    });
});

First of all, bind the 'click' event and $('this') is not the same as $(this).

Upvotes: 0

Related Questions