Jquery hide and show

Question

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

In your CSS it should be display: none; not display=none. — David Thomas
– David Thomas, Commented Mar 16, 2011 at 16:38

Zakaria · Accepted Answer · 2011-03-16 16:37:18Z

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.

Daniel Wright · Accepted Answer · 2011-03-16 16:38:23Z

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

Prakash · Accepted Answer · 2011-03-16 16:39:58Z

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

user657496 · Accepted Answer · 2011-03-16 16:36:30Z

$(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).

Chowlett · Accepted Answer · 2011-03-16 16:40:27Z

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

Collectives™ on Stack Overflow

Jquery hide and show

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related