How to toggle css visibility with Javascript

Question

I am trying to create a FAQ page much like the one here: https://www.harrys.com/help I want to create the effect where clicking a question will display an answer.

My code can be seen here: http://jsfiddle.net/8UVAf/1/

Can anybody tell me why my javascript is not working? I realized I combined jQuery and Javascript, but I read somewhere that it should compile fine.

HTML:

<div class="questions-answer-block">
    <p class="question">This is a Question?</p>
    <p id="answer" class="hideinit">Here is the Answer</p>
</div>
<div class="questions-answer-block">
    <p class="question">This is a Question?</p>
    <p id="answer" class="hideinit">Here is the Answerdadawdawdawdawdawdawdawdwadawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawd</p>
</div>

JS:

$(".question").click(function (argument) {
    if(document.getElementById("answer").className.match(/(?:^|\s)hideinit(?!\S)/)) {
        document.getElementByID("answer").className = "display";
    }
});

You have a fundamental mis-understanding of `id` and `class` parameters. `id` values **must** be unique, classes can be shared. — esqew, Jun 23 '14 at 16:41
http://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery/9528667#9528667 — SpYk3HH, Jun 23 '14 at 16:46
^thanks. That worked! @esqew I see now that having ID's as the identified for all "answers" does not work. If I change all answers to share the "answer" class, how should I use the getElementById function. Is there a class alternative? — robinhuang, Jun 23 '14 at 16:46
jQuery's ***much easier version of*** `getElementById` is `$('#elementID')`, and to get by class name `$('.class-name')` — SpYk3HH, Jun 23 '14 at 16:47
@robinhuang The vanilla Javascript version would be `document.getElementsByClassnName()` — esqew, Jun 23 '14 at 16:48
[document.getElementsByClassName()](http://javascript.about.com/library/bldom08.htm). — Jacob G, Jun 23 '14 at 16:49
Thanks for all the answers! This is has been really helpful. I'm sorry if I asked a stupid question. — robinhuang, Jun 23 '14 at 16:55

drew_w · Accepted Answer · 2014-06-23T16:54:58.690

1

Basically your Javascript could be shortened to:

$(".question").click(function(argument) {  
    $(this).parent().find(".answer").removeClass("hideinit").addClass("display");
});

In order to make this work the only other thing you need to do is to make question a class rather than as an id. That looks like:

<p class="answer hideinit">the answer</p>

See the fiddle here

Edit: Add Hide / Show

To get this to hide and show as expected you'll want to update the code to check the current class before hiding and showing. That looks like:

$(".question").click(function(argument) {  
    var el = $(this).parent().find(".answer");
    if (el.hasClass("display")) {
       el.removeClass("display").addClass("hideinit");
    } else {
        el.removeClass("hideinit").addClass("display");
    }
});

See the fiddle here

edited Jun 23 '14 at 16:54

answered Jun 23 '14 at 16:48

drew_w

10,320
4
28
49

This works! But, how can I edit the jQuery so that the answer will disappear after you click on Question again? I'd rather not use the toggle function because I want to directly control other css properties as well. – robinhuang Jun 23 '14 at 16:52
Just add an if "has class" and do a remove class. (Example on its way) – drew_w Jun 23 '14 at 16:52

score 0 · Answer 2 · answered Jun 23 '14 at 16:46

0

Well, for one thing, in your JSFiddle you were not including the jQuery library. I've adjusted your code, I think this is what you were going for:

$(".question").click(function() {
    $(this).siblings().toggle();
});

Here's an updated JSFiddle.

answered Jun 23 '14 at 16:46

APAD1

13,509
8
43
72

score 0 · Answer 3 · answered Jun 23 '14 at 16:47

Please watch your includes in your JSFiddle as the version you linked was not including the jQuery library. You should also clean up your multiple id references (as this is invalid HTML and will cause some issues down the road).

Those issues aside, you can use jQuery's .next() method to help you with this particular problem:

$(".question").click(function (argument) {
    $(this).next(".hideinit").removeClass("hideinit").addClass("display");
});

JSFiddle

score 0 · Answer 4 · answered Jun 23 '14 at 17:22

0

$(".question").on('click',function() {
    $(this).next().toggle();
});

answered Jun 23 '14 at 17:22

sol

174
1
9

How to toggle css visibility with Javascript

4 Answers4

Here's an updated JSFiddle.