jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div data-step="1">
    <h3>Question 1:</h3>
    <!--<p class="lead">asasa sad sda dasdasdasdasdasdsadsadsa</p>-->
    <div class="form-group">
        <label class="container_radio">I want bananas
            <input type="radio" name="q1[]" value="1" class="required main_question">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group">
        <label class="container_radio">I want pears
            <input type="radio" name="q1[]" value="2" class="required main_question">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group">
        <label class="container_radio">I want apples
            <input type="radio" name="q1[]" value="3" class="required main_question">
            <span class="checkmark"></span>
        </label>
        <div class="row sub-question" style="display: none">
            <h3 class="col-12">What color do you want?</h3>
            <div class="form-group col-12">
                <label class="container_radio">Red
                    <input type="radio" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_radio">Green
                    <input type="radio" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_radio">Yellow
                    <input type="radio" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
    </div>
</div>

JavaScript

$('.form-group > label').find(' > input:checkbox.main_question, > input:radio.main_question').on('click', function() {

    el = $(this).closest('.form-group').find('.sub-question');
    
    if(el.length > 0) {
        el.css('display', 'block');
    }
    else {
        $('.sub-question').css('display', 'none');
        //el.css('display', 'none');
    }
});