Display HTML element only if the class is not currently visible

Recently, I created a dynamic web page using jQuery which involves the hiding and showing of elements based on their classes.

For example:

<p class='lookup'>You can lookup all the values.</p>

If a user is unable to perform a lookup, I simply execute:

$('.lookup').hide();

using jQuery. Everything functions perfectly and runs smoothly.

Now, I am faced with the task of adding a simple remark in the HTML that varies depending on whether the class 'lookup' is visible or not. Essentially, implementing an if-else scenario.

<p class='lookup'>Show me when class lookup is visible</p>
<p ????>Show me when class lookup is not visible</p>

Is there a straightforward solution or workaround in HTML/CSS or even jQuery (outside of the existing script) that would display a paragraph whenever $('.lookup').hide(); is called and hide it when $('.lookup').show(); is executed?

I am eager to find out if there is a basic workaround for this dilemma, as currently, I am using an additional 'noLookup' class along with some added code in my existing jQuery script. It seems like there should be a simpler way to achieve this that I may have overlooked.

jqueryhtmlcss

Answer №1

One way to check if the .lookup element is hidden is by using the style attribute selector:

$("#toggle").on("click", function() {
  var lookup = $('.lookup');
  if ($(this).is(':checked')) {
    lookup.show();
  } else {
    lookup.hide();
  }
});
.no-lookup {
  display: none;
}

.lookup[style*="display: none;"] ~ .no-lookup {
  display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle lookup</button>
<p class="lookup">You can look up!</p>
<p class="no-lookup">Sorry, you can't look up :(</p>

Answer №2

Perhaps this example could provide some assistance:

$(function () {
  $(".option1, .option2").hide();

  $(".button1, .button2").bind("click", function () {
    $(".option1, .option2").hide();        

    if ($(this).attr("class") == "button1")
    {
      $(".option1").show();
    }
    else
    {
      $(".option2").show();
    }
  });

});

http://jsfiddle.net/rGKsP/

Answer №3

If you want to adjust the execution time of a jQuery hide() function, you can simply specify it as the first argument which is by default set to 400ms. Additionally, you can include a callback as the second argument like this:

$('.lookup').hide(400, $('.otherElement').show());

This setup ensures that the callback will run once the hiding process is completed.

The same principle applies for the show function as well.

I trust this explanation proves beneficial!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to prevent already selected options from being chosen in a Vue.js HTML form?

Among my json data, I have a list of all inventories: { "status": true, "data": [ { "inv_id": 1, "name": "Arts" }, { "inv_id": 2, "name": "web" }, { "inv_id": 3, "name": "mobileapp" }, { "inv_id": 4, "name": "ws" }, { "inv_id": 5, ...

javascripthtmlvue.jsvue-componentvue-router

ASP.NET sending an AJAX request

Hi, I am new to the world of ajax requests and asp.net. I am facing an issue while sending an ajax request to an aspx page. Even though the server side debugging seems fine, I am encountering an error message in the response. I have already tried changing ...

javascriptjqueryasp.netajax

Making adjustments to a Jquery data attribute can have a direct impact on CSS

My CSS is using a data attribute, but when I try to change it with jQuery, the change is not reflected on the screen or in the DOM. $('#new-1').data('count', 5); .fa-stack[data-count]:after { position: absolute; right: -20%; to ...

javascriptjqueryhtmlcss

Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system. I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows: index.html <nav ...

htmlcsstwitter-bootstrapbootstrap-4

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...

csstwitter-bootstrapbootstrap-table

Significant challenges with the CSS grid system

I'm brand new to the world of programming and I'm currently attempting to recreate this webpage layout using HTML & CSS: Click here for desired look. My approach so far has been utilizing CSS grid, and while I grasp the concept, I'm faci ...

htmlcsscss-grid

Getting Started with SimpleModal in ASP.NET: A Beginner's Guide

Implementing SimpleModal with ASP.NET I want to express my gratitude to Eric for creating SimpleModal and applaud the demos. They look incredible. I am struggling to grasp how to use it though, seems like I'm missing something here. Apologies in adv ...

asp.netjquerypopuppanelsimplemodal

Arranging masked divs' content using SVG

Currently faced with the challenge of creating stacked <div> elements where the top-level <div> has masked content in React (although this is primarily for SVG element notation). I have two responsively-styled <div>s — A and B — each ...

htmlcssreactjssvg

capturing webpage content with javascript for use in a screenshot

Is there a way to capture a screenshot of a webpage using JavaScript and utilize the canvas tag for this purpose? I attempted to use the html2canvas plugin in the past, but found it lacking in power. I would like to achieve this without relying on extern ...

javascriptjqueryhtmlcanvaswebpage-screenshot

Issue encountered when combining htaccess rewrite and form submission

After conducting several researches without success, I have decided to seek clarification here. If anyone could help me understand this issue, it would be greatly appreciated. Thank you. When I use , everything works fine. The AJAX sends a post request to ...

phpjqueryajax.htaccessurl-rewriting

Issue with concealing floated elements within a container div

I am currently facing an issue with trying to hide floated divs within a parent div, but unfortunately my code is not working as expected. Here is the code snippet: div.scrollarea { overflow: scroll; width: 400px; ...

htmlcss

Managing CSS and Image Files in ASP.NET MVC

Hey there, I'm currently working on a simple application using ASP.NET MVC. I've made some changes to the default master.css file to customize my styles. However, I'm running into an issue with adding a background-image property to one of my ...

asp.netasp.net-mvccss

Having trouble finding the maximum and minimum dates with Moment()?

My task involves working with an array of dates and finding the maximum and minimum dates within it. Below is the code I've written for this purpose: let date_list = [ "2021-03-19T00:00:00Z", "2021-03-20T00:00:00Z", "2021-04-12T00:00:00Z", "202 ...

javascriptjqueryarraysecmascript-6momentjs

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

javascripthtmlcss

Using jQuery to dynamically disable a textbox when a checkbox is checked

I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color ...

jqueryhtmlcss

Best practices for working with HTML elements using JavaScript

What is the best approach for manipulating HTML controls? One way is to create HTML elements dynamically: var select = document.getElementById("MyList"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = ...

javascripthtml

Struggling to properly align a div on top of an image

view image description herei need assistance with centering the div over the background image. I attempted to use relative positioning for the container and absolute positioning for the elements, but it did not yield the desired result. The code snippet be ...

htmlcss

Handling AJAX Events - pre-sending, encountering failure and successfully completing

I am attempting to add an "on begin" handler to an AJAX call, but I keep running into the following error message: TypeError: request.beforeSend is not a function According to the information on the JQuery documentation site, the code snippet below should ...

jqueryajaxasp.net-mvc-3

Tips on implementing a jQuery .load() function using an anchor tag within dynamic content

I am working on a search page where user input is taken from a form and then sent to a PHP file that makes a cURL call to an external server. The PHP file receives an array from the server, which it uses to display HTML in a "results" div on the original s ...

phpjavascriptjqueryajaxmodal-dialog

What is the best way to remove empty arrays from a larger array?

I have successfully managed to extract the array containing the product (filtered by an ID), but I am encountering empty arrays in the output as well. Below is the snippet of code I used for this example: var category = [{ "reference": 'BC-ENF ...

javascriptjqueryarraysjsonmapping