Mike Wiesenhart Mike Wiesenhart - 27 days ago 9
HTML Question

Newbie jQuery toggle/hide/show on button click

I am trying to write a function using jQuery, but my jQuery is not good at all. When the page loads there should be two fields

Min Apt Price
and
Max Apt Price
. When I click a button, those initial fields need to hide and I need
Min Bed Price
and
Max Bed Price
to display. I have gotten to the point where when the page loads the
Min Apt Price
and
Max Apt Price
will display and the other two remain hidden. When I click the button the
Min Bed Price
and
Max Bed Price
will display, but next to the original fields. Hope that makes sense.

HTML:



$(document).ready(function() {
$('.room-price').hide();
$('#price-switch').click(function() {
$('.room-price').toggle();
$('.apt-price').hide();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="price-switch">Switch</button>
<div class="row">
<div id="apt-price">
<div class="col-sm-2 min-max-price">
<div class="input-group">
<input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price">
</div>
</div>
<br class="visible-xs">
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price">
</div>
</div>
</div>
<div class="room-price">
<div class="col-sm-2 min-max-price">
<div class="input-group">
<input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price">
</div>
</div>
<br class="visible-xs">
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price">
</div>
</div>
</div>
</div>




Answer

You have apt-price as an ID, not a class, so if you wanted to just toggle them, you'd do

$(document).ready(function() {
    $('.room-price').hide();
    
    $('#price-switch').click(function() {
        $('.room-price, #apt-price').toggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="price-switch">Switch</button>
<div class="row">
    <div id="apt-price">
        <div class="col-sm-2 min-max-price">
            <div class="input-group">
                <input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price">
            </div>
        </div>
        <br class="visible-xs">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price">
            </div>
        </div>
    </div>
    <div class="room-price">
        <div class="col-sm-2 min-max-price">
            <div class="input-group">
                <input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price">
            </div>
        </div>
        <br class="visible-xs">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price">
            </div>
        </div>
    </div>
</div>

Comments