Show/Hide buttons

Question

Basically I want to show the buttons for iPhone3GS when clicked and when iPhone4 or another button is clicked the other buttons go back into hiding. Each form has a class in the body saying iPhone 3GS, iPhone4, and so on. So when iPhone3GS is clicked it will show the iPhone3GS contents. It doesn't matter if it's jQuery or javascript, I just want it to work.

Here's the jsfiddle: http://jsfiddle.net/wLY7C/4/

Here's a piece of the javascript (I'm aware that this code is not valid; just an example):

if (q1 == "iphone3gs") 
{
    $('.show(iphone3gs)').val('.hide(iphone4 iphone4s iphone5 iphone5s)').click(function () 
    {
       window.location.href = 'iphone3gs'
    });
}

You have typo.. close all if conditions properly. http://jsfiddle.net/wLY7C/6/ — Unknown, Sep 05 '13 at 19:20
Waaaaay too much code in your fiddle. Reduce your code to a bare bones example and also post your code here as well. Always. — j08691, Sep 05 '13 at 19:20
Dup. [Moved from here](http://stackoverflow.com/questions/18643118/how-to-show-hide-buttons-in-questionnaire). — Praveen Lobo, Sep 05 '13 at 19:24
Yours seems to work @Unknown Post it as an answer but one thing is, why is it in a loop? I need the iphone3gs, 4, 4s, 5, and 5s to show all at the same time then open it's contents when clicked. — user2680614, Sep 05 '13 at 19:26
@Lobo It's made more simple with less confusion on this one and there is a small difference between the two so it's not duped. — user2680614, Sep 05 '13 at 19:28
@user2680614: It's very similar. For next time, edit your question, don't create a new one! — Michael Schmidt, Sep 06 '13 at 11:14

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

The code is too long to get it working for you (maybe someone else has time). I can name the things you have wrong so you can look at them.

Things to fix:

You cannot have double IDs. All elements that have the dame ID have to be renamed. You have many elements with id #quiz and form. You need to fix this.
To hide a element use: $('.iphone4').hide(); - to show $('.iphone4').show(); and to toggle: $('.iphone4').toggle(); - .iphone4 in that code means all elements with that class.

Try this:

        if (q1 == "iphone3gs") {
            $('.iphone3gs').show().click(function () {
                window.location.href = 'iphone3gs'
            });
            $('.iphone4,.iphone4s,.iphone5,.iphone5s').hide(); //or use $('form[name="quiz"]').hide(); before the show.               
        } //this was also missing on your other if statements

edited May 23 '17 at 12:20

Community

1
1

answered Sep 05 '13 at 19:21

Sergio

27,160
10
79
126

.typo(I think your 2nd `.hide()` should be a `.show()` )? – cssyphus Sep 05 '13 at 19:57
@gibberish, i meant a `.hide ()` actually. I think OP wants to hide all classes but the one with `.show ()` – Sergio Sep 05 '13 at 20:00
I meant in your 2nd bullet point, under `Things to fix:` – cssyphus Sep 05 '13 at 20:01
@gibberish Aha! Yes! Thank you, corrected :) – Sergio Sep 05 '13 at 20:02

score 0 · Answer 2 · answered Sep 05 '13 at 19:32

Your code is way too long and messy to debug. However, I made this fiddle which does what you are trying to do. Hopefully you can use it to get yours working correctly.

JSFiddle

This is an example of Level 1 (q1 in your code):

$(".level1").click(function() {
    $(".level1").hide(); //Hide all level 1
    $(this).show(); //Display only current selection from level 1
    q1 = $(this).attr("id"); //Set q1 to selection
    $(".level2").show(); //Display level 2 now that level 1 has been selected/hidden
});

Show/Hide buttons

2 Answers2