Develop Reference

Hide/Show Elements not Working on Mobile/Tablet, only Desktop

I have 2 buttons, Check & Back.
When a user clicks Check, the button should change to Back so they cannot click Check 2 times in a row. However, on mobile view in chrome devtools, this does not work.
Any advice? Thanks in advance!
<button type="button" class='btn goCheck' id="goCheck" data-show="back" style="width: 100%;">Check</button>
<button type="button" class='btn goBack' id="back" style="width: 100%; display: none;" onClick="refreshPage()">Back</button>
$(document).ready(function(){
$('.goCompare').click(function(){
$('.goCheck').hide()
$('.selectBtn').hide()
$('#'+$(this).attr('data-show')).show()
})
})

From your code, you're mixing javascript and jquery. So I just went with jquery fully to solve this making minimal changes to your original code. I rewrote the refreshPage function to fire on the click on the back button. I also removed the onclick method in the html. It seems to work for me in devTools as well. Hopefully this helps.
$(document).ready(function(){
$('.goCompare').click(function(){
$('.goCompare').hide()
$('.selectBtn').hide()
$('#'+$(this).attr('data-show')).show()
})
})
//Refresh Page script
$(document).on('click', '#back',function(){
window.location.reload();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class='btn goCompare' id="goCompare" data-show="back" style="width: 100%;">Compare</button>
<button type="button" class='btn goBack' id="back" style="width: 100%; display: none;">Back</button>

I have tested this answer in Chrome Devtools and confirmed functionality.
I think jquery is overkill here and I think it would be better if you only had one button that was controlled by an event listener.
document.getElementById("goCompareBack").addEventListener('click', function(e) {
if (document.getElementById("goCompareBack").innerHTML === "Back") {
refreshPage();
} else {
document.getElementById("goCompareBack").innerHTML = "Back";
compare();
}
})
function refreshPage() {
window.location.reload();
}
function compare() {
// comparing logic here
}
<button type="button" class='btn goCompareBack' id="goCompareBack" data-show="compareBack" style="width: 100%;">Compare</button>

Replace alert function with an image

$(".site-main").on("sf:ajaxstart",function(){
alert("show loader");
});
$(".site-main").on("sf:ajaxfinish",function(){
alert("hide loader");
});
I got this above code from a forum and it is showing me the alerts as it should. However, I'm planning to show a loader image with location path <img src="/path/image.gif" class="loader"> instead of the alert.
How can I go about this?

You could do like this
$(".site-main").on("sf:ajaxstart",function(){
$('img.loader').show()
});
$(".site-main").on("sf:ajaxfinish",function(){
$('img.loader').hide()
});

Note:- You can do toggle show hide.based on events triggered. Here is the basic demo which will help you to understand the functionality.
$(document).ready(function() {
$(document).ajaxStart(function() {
$("img").show();
}).ajaxStop(function() {
$("img").hide('slow');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://icon-library.net/images/loading-icon-png/loading-icon-png-12.jpg" height='50px' width='50px' alt="Loading" class='loader' style="display:none">
<form>
<button type="button" class="btn" onclick="showLoader(); return false;">Show Data</button>
</form>
<script>
function showLoader() {
$.post("/echo/json", {});
}
</script>

jQuery .height() not changing

I have this code:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').height('auto');
});
});
Which changes the height of a div on a link click. I have put an alert inside this function and can confirm it's being ran when the link it clicked, only the height of the target div isn't changing. The target div has a height of 0 set in the CSS file to begin with but it's not being updated.
Does anyone have any idea what may be going on here?

Try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').css('height','auto');
});
});

See how changing the height of an element works:
.test{
margin:10px;
border-style:solid;
border-width:1px;
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="height:10px" onclick="$('.test').css('height','10px');">
<input type="button" value="height:auto" onclick="$('.test').css('height','auto');">
<input type="button" value="height:0px" onclick="$('.test').css('height','0px');">
<input type="button" value="hide" onclick="$('.test').hide();">
<input type="button" value="show" onclick="$('.test').show();">
<div class="test">test</br>test test</br>test</br>test</br></div>

you can also try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').attr('style','height:auto');
});
});

Please put your script code below the jQuery library and run again as shown below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto');});});

Change CSS "display: none;" to shown

I want an element on my website hidden when the website loads, but when a user submits a form, then it changes to show. I have tried for hours now, can't get it to work.
Code:
HTML
<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>
CSS
.hidden {
display: none;
}
JavaScript
function show () {
document.getElementById("mymessage").style.display = 'block';
}
Disclaimer: I only included relevant code.
Hope somebody is able to help me/spot the error!

You have to return false to prevent the browser from refreshing the page so that you can hide the element on submit:
function show () {
document.getElementById("mymessage").style.display = 'block';
return false;
}
.hidden {
display: none;
}
<form onsubmit="return show();">
<button>enviar</button>
</form>
<div id="mymessage" class="hidden">Message was sent.</div>

I would remove the hidden class:
function show () {
document.getElementById("mymessage").classList.remove("hidden");
}
(classList has very broad support, and can be polyfilled on obsolete browsers if necessary.)
Live Example (using a button click instead of a form submit):
function show () {
document.getElementById("mymessage").classList.remove("hidden");
return false;
}
.hidden {
display: none;
}
<form>
<div id="mymessage" class="hidden">Message was sent.</div>
<input type="button" onclick="show();" value="Click Me">

i think this is a solution
document.getElementById("mymessage").classList.remove("hidden");

What about if you use jQuery instead?
</script>
<script>
$(document).ready(function(){
$("form").submit(function(){
jQuery('#mymessage').show();
});
});
</script>
Remember to add the library above the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

js slideUp doesn't work

I want to add slideUp effect to my page. My <body> code is:
<script>
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
</script>
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
When i click a button nothing happens. Please help.

Wrap it in $(document).ready. Your click handler is being assigned before the #slide_up element is ready for use:
$(document).ready(function(){
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
});

JSFIDDLE http://jsfiddle.net/3uhCa/2/
Nothing wrong with your code. are you loading jquery correctly?
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>