CSS class toggle with jquery on different id's

Question

I'm trying to write some Jquery code for toggling two different class on different ids. Since the CMS strips out inline css, I need to find a solution for "display:none" I have written two css classes, in hopes of toggling between them, but not really sure if this is the direction to go . I'm very new to Stack and Jquery so any info or corrections are welcomed Here is the code:

CSS

.displaynone{
    display:none;
}
.displayblock{
    display:block;
}

HTML & JAVASCRIPT

<form>
    <input onclick="javascript:resetForm();document.forms[0].reset();" type="reset" value="Reset" />&#160;
    <br />
    <br />
    <h4>Are you number 1?</h4>
    <label>
        <input name="one" onclick="unhide('hidden-input', this, 'hidden-input2')" type="radio" value="1" /> Yes

        <br />
    </label>
    <label>
        <input name="one" onclick="unhide('hidden-input2', this, 'hidden-input')" type="radio" value="2" /> No

        <br />
    </label>
    <div id="hidden-input2" style="display: none;">
        <p>If you are not , please download:

            <br />
            <a href="#" target="_blank">
                <span style="font-size: x-small;">number one</span>
            </a>
        </p>
    </div>
    <div id="hidden-input" style="display: none;">
        <hr />
        <h4>Were you selected for too many hours?</h4>
        <label>
            <input name="hours" onclick="unhide('hidden-input3', this, 'hidden-input4')" type="radio" value="1" /> Yes

            <br />
        </label>
        <div id="hidden-input3" style="display: none;">
            <p>If you were selected for too many hours, please download:

                <br />
                <a href="#" target="blank">
                    <span style="font-size: x-small;">Hours</span>
                </a>
            </p>
        </div>
        <label>
            <input name="hours" onclick="unhide('hidden-input4', this, 'hidden-input3')" type="radio" value="2" /> No

            <br />
        </label>
        <div id="hidden-input4" style="display: none;">
            <hr />
            <h4>Were you selected for number 3?</h4>
            <label>
                <input name="gpa" onclick="unhide('hidden-input5', this, 'hidden-input6')" type="radio" value="1" /> Yes

                <br />
            </label>
            <div id="hidden-input5" style="display: none;">
                <p>If you were selected for number 3, please download:

                    <br />
                    <a href="#" target="blank">
                        <span style="font-size: x-small;">Form for Three </span>
                    </a>
                </p>
            </div>
            <label>
                <input name="gpa" onclick="unhide('hidden-input6', this, 'hidden-input5')" type="radio" value="2" /> No

                <br />
            </label>
            <div id="hidden-input6" style="display: none;">
                <p>Were you selected for 4 :

                    <br />
                    <a href="#" target="blank">
                        <span style="font-size: x-small;">Form for 4</span>
                    </a>
                </p>
            </div>
        </div>
    </div>undefined
</form>

It's generally better to avoid onclick and other inline event handlers. Instead, create a script tag and use a document.ready block with your event handlers. Where's unhide()? — isherwood
– isherwood, Commented Oct 27, 2015 at 18:36
Your CMS probably doesn't block inline styles after rendering, so you can simply use jQuery's show() and hide() methods after load. — isherwood
– isherwood, Commented Oct 27, 2015 at 18:39
Your question would be better if you simplified your markup to one example and explained what event should show or hide what element(s). — isherwood
– isherwood, Commented Oct 27, 2015 at 18:40

stackoverfloweth · Accepted Answer · 2015-10-27 18:26:15Z

1

change your element to default as display:block and define a class

.hidden{
    display:none;
}

and use this to toggle that class on/off

$('#YOURID').toggleClass("hidden")

answered Oct 27, 2015 at 18:26

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bingo · Accepted Answer · 2015-10-27 18:29:30Z

0

Easier to just have the hidden class and remove it when you want to show the element. That way you don't have to worry about altering inline, block and table display properties.

// hide the thing
$('.thing').addClass('displaynone');

// show the thing
$('.thing').removeClass('displaynone');

answered Oct 27, 2015 at 18:29

bingo

2,3081 gold badge18 silver badges21 bronze badges

Comments

indubitablee · Accepted Answer · 2015-10-27 18:47:56Z

0

demo: http://jsfiddle.net/swm53ran/401/ something like this? i started recreating the logic, but i didnt finish it. you should get a gist of what's going, and if you have any questions on it, let me know.

$(document).ready(function() {

    $('input[type="radio"]').on('change', function() {
        var name = $(this).attr('name');
        var value = $(this).val();
        console.log(name, value);
        if (name == 'one') { // if number 1 question
            if (value == 2) { 
                $('#hidden-input2').show(); // if no, show the download text
            }
            else {
                $('#hidden-input2').hide(); // if yes, hide the dl text
            }
            $('#hidden-input').show(); // always show the hours question
        }
        if (name == 'hours') {  // if hours question
            if (value == 2) {
                $('#hidden-input4').show() // if no, show number 3 question
            }
            else {
                $('#hidden-input4').hide() // if no, hide number 3 question
            }
        }
    });
});

answered Oct 27, 2015 at 18:47

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

1 Comment

nicban Over a year ago

Yes this is generally what I am trying to accomplish! Thanks if I have any questions, I'll let you know.

isherwood · Accepted Answer · 2015-10-27 18:52:01Z

0

It's generally advisable to avoid targeting IDs, and instead use common classes inside grouping wrappers.

 <div>
    <label>
        <input name="one" class="selector yes" type="radio" value="1" />Yes
        <br />
    </label>
    <label>
        <input name="one" class="selector no" type="radio" value="2" />No
        <br />
    </label>
    <div class="followup yes hidden">
        <p>If you are not , please download:
            <br /> <a href="#" target="_blank">
            <span style="font-size: x-small;">number one</span>
        </a>

        </p>
    </div>
    <div class="followup no hidden">
        <hr />
         <h4>Were you selected for too many hours?</h4>

    </div>
</div>

$('.selector').click(function () {
    $(this).closest('label').siblings('.followup').hide();

    if ($(this).is('.yes')) {
        $(this).closest('label').siblings('.followup.yes').show();
    } else {
        $(this).closest('label').siblings('.followup.no').show();
    }
});

Demo

This single function is reusable for any number of groupings having the same structure, even if nested.

Nested demo

answered Oct 27, 2015 at 18:52

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

1 Comment

nicban Over a year ago

Thanks for your suggestions and all of your feedback its really helpful.

Collectives™ on Stack Overflow

CSS class toggle with jquery on different id's

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related