I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance would be greatly appreciated.
$('#submit').click(function (e) {
e.preventDefault();
str = $('#string').val();
if (checkPalin(str)) {
return $('#true').css('display', 'block');
} else {
return $('#false').css('display', 'block');
}
});#result span {
display: none;
font-weight: bold;
}<input type="text" name="string" id="string" value="check">
<input id="submit" type="submit" value="check">
<p id="result">
<span id="true">This string is a palindrome!</span>
<span id="false">This string is
<strong>not</strong> a palindrome
</span>
</p>