use different css when button clicked with different media queries - css

Question

Good afternoon. I have a little problem that is causing me a headache. I have a DIV with an ID of 'booking-md' This changes size with media query and works well like so.
<div id="booking-md" class="container-fluid booking-md"></div>
and media queries change it like so:-
#media screen and (max-width:991px) {
.booking-md { height: 320px}
}
#media screen and (max-width:767px) {
.booking-md { height: 220px}
}
#media screen and (max-width:560px) {
.booking-md { height: 320px}
}
I also have a button which makes the 'booking-md' height bigger like so
<button type="button" onclick="ret()" class="btn btn-return">Return</button>
function ret() {
$('#booking-md').css('height', '175px');
$('#return').show()
}
Now this adds 50px to the size ok but when It resizes it does not use the original media queries to change size. Ideally I need to have 2 different sets of media queries, one for if button has been clicked and one if not.
I have tried this with changing the class but doesnt do much after changing the size once. It looks like it loses all the media queries.
document.getElementById("booking-md").className = "booking-sm";
Is using php with this an option? Im at a loss and seem to have tryied everything, thanks

Answer 1

#wayneuk2, please have a look at the below working snippet, have made a few minor updates to your own code, hope it helps :)
.set-height {
height: 175px;
}
.booking-md {
border: 4px solid #ccc;
}
#media screen and (max-width:991px) {
.booking-md {
height: 320px
}
}
#media screen and (max-width:767px) {
.booking-md {
height: 220px
}
}
#media screen and (max-width:560px) {
.booking-md {
height: 320px
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="booking-md" class="container-fluid booking-md">
</div>
<br />
<button type="button" onclick="ret()" class="btn btn-primary btn-return">Return</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
function ret() {
$('#booking-md').addClass('set-height');
$('#return').show()
}
</script>

Answer 2

wow that was easy!! Dont know why I was trying the hard ways, I simply too out the change the height in the media queries and just set the 'booking-md' height like this to fit in the content.
.booking-md {height:auto;overflow: hidden;)
Works like a charm