How to toggle between responsive and non-responsive design - responsive-design

Question

Ok, so with the help of a couple sites, I was able to put this code together to inactivate the responsive coding for a website and activate the non-responsive coding. However, when the link is clicked again, it doesn't perform this function in reverse.
I tried using ".toggle", but that doesn't work. Which event should I be using to get this effect? Any help would be great!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#togglerwd").click(function() {
$('meta[name="viewport"]').prop('content', 'width=1440');
});
});
</script>
Toggle Responsive Layout

Answer 1

Isn't there an event that will allow the code to be active and inactive when the hyperlink is clicked?
The click itself is the event that is happening – but that event does not know anything about what “state” your page is currently in.
A “flag” is a common programming basic, and not specific to jQuery or JavaScript. Basically it is just a variable with a value that alternates between true and false, and based on which you decide what to do.
It would look something like this:
$(document).ready(function (e) {
// set the initial flag value, we assume your page “starts” in responsive mode
var isResponsive = true;
$("#togglerwd").click(function() {
// check flag, to see what state the page is in
if(isResponsive) {
// set viewport meta to “non-responsive”
$('meta[name="viewport"]').prop('content', 'width=1440');
// remember current state in flag for check on next click
isResponsive = false;
}
else {
// set viewport meta to “responsive”
$('meta[name="viewport"]').prop('content', 'width=device-width');
// remember current state in flag for check on next click
isResponsive = true;
}
});
});

Answer 2

Thank you so much for your help CBroe, but I ended up creating the exact solution I wanted. Here is the code:
<script>
$(document).ready(function () {
$("#togglerwd").click(function() {
$('meta[name="viewport"]').prop('content', 'width=1440');
});
$("#togglerrl").click(function() {
$('meta[name="viewport"]').prop('content', 'width=device-width');
});
});
</script>
Full Site |
Responsive Layout