Toggle visibility with JQuery's onClick event

Question

Toggle visibility with JQuery's onClick event

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>

jquery css

Answer 1

Answer №1

Give this a shot:

$('#submit').click(function (e) {
    e.preventDefault();
    str = $('#testString').val();
    // Check if palindrome
    console.log('The value entered was: ' + str);
    if (checkPalin(str)) {
        // Clear input field
        $('#testString').val('');
        // Show the #true result
        $('#true').show();
        // Hide the #false result
        $('#false').hide();
        // Log success message
        console.log('The value ' + str + ' passed our condition');
    } else {
        // Clear input field
        $('#testString').val('');
        // Show the #false result
        $('#false').show();
        // Hide the #true result
        $('#true').hide();
        // Log failure message
        console.log('The value ' + str + ' failed our condition');
    }
    return false;
});

You'll be verifying the condition as before, but using the Hide() and Show() methods to show your outcomes accordingly.

Answer 2

Give this a shot:

$('#submit').click(function (e) {
    e.preventDefault();
    str = $('#testString').val();
    // Check if palindrome
    console.log('The value entered was: ' + str);
    if (checkPalin(str)) {
        // Clear input field
        $('#testString').val('');
        // Show the #true result
        $('#true').show();
        // Hide the #false result
        $('#false').hide();
        // Log success message
        console.log('The value ' + str + ' passed our condition');
    } else {
        // Clear input field
        $('#testString').val('');
        // Show the #false result
        $('#false').show();
        // Hide the #true result
        $('#true').hide();
        // Log failure message
        console.log('The value ' + str + ' failed our condition');
    }
    return false;
});

You'll be verifying the condition as before, but using the Hide() and Show() methods to show your outcomes accordingly.

Toggle visibility with JQuery's onClick event

Answer №1

Similar questions

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

In need of a solution for this peculiar problem with an html table and css. Let's

What sets srcset apart from media queries?

What are the initial and final functions in JQuery DataTableset.net?

Transfer the layout from one HTML file to multiple others without the need to retype the code

When using Google Maps Autocomplete, always make sure to input the full state name instead of just the state

What issue is being encountered with this JavaScript generated by PHP?

Using jQuery or Javascript to implement a drop-down list filter functionality

Tips for preventing a table from showing up while scrolling unnecessarily when utilizing a heading with the CSS position property set to 'sticky'

Ensure the first column is fixed and all other columns have the same height

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

What could be causing the sluggishness in my jQuery script that checks for required input fields?

Generate new variables based on the data received from an ajax call

"The issue with the jQuery form is that it is not functioning as intended. It seems that the ajax

Django: Error - < found where unexpected

"Enhance your website with jQuery autocomplete: displaying and structuring various elements

Tips for creating multiple full-screen overlays in HTML

Modify the URL parameter when a button is clicked

What is the best way to navigate back on a button click in jquery AJAX without causing a page refresh?

What are the steps for encoding a value using jquery serialize?