Hide element with jQuery if either of the two divs are currently visible

Initially, I have 2 hidden div elements:

<div id="hidden1" style="display:none;">
<div id="hidden2" style="display:none;">

In addition, there is a visible div:

<div id="visible" style="display:block">

A jQuery script ensures that only one of the hidden elements can be open at a time, with buttons to toggle between them.

Currently, when both hidden elements are closed, the visible div is also hidden. My goal now is for the visible div to reappear when both hidden elements are closed.

If you're interested in viewing the site, you can visit maxdev.tk

The relevant jQuery code snippet is:

$(document).ready(function(){
    $("#button1").click(function(){
        $("#hidden1").hide(600);
        $("#hidden2").toggle(900);
});
});

$(document).ready(function(){
    $("#button2").click(function(){
        $("#hidden2").hide(600);
        $("#hidden1").toggle(900);
});
});
javascriptjqueryhtmlcss

Answer №1

This is a unique solution to the problem. You can also find it in written form at the bottom of this article.

$(document).ready(function() {
  function checkStatus() {
    if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
          $('#me').removeClass('hidden');
    } else {
          $('#me').addClass('hidden');
    }
  }
  $('button[data-for=whistle]').on('click', function() {
    $('#whistle').toggleClass('hidden');
    $('#lean').addClass('hidden');
    checkStatus();
  });
  $('button[data-for=lean]').on('click', function() {
    $('#lean').toggleClass('hidden');
    $('#whistle').addClass('hidden');
    checkStatus();
  });
})
.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}

div {
  background-color: #ccc;
  border-radius: 25px;
  margin-top: 20px;
  padding: 50px;
  text-align: center;
  transition-duration: 0.4s;
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>

http://codepen.io/anon/pen/yNJrwe

Answer №2

To implement this functionality, simply include the following code snippet at the conclusion of each button's click event.

if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
      $('#me').css("display","block"); // You can also use .show();
} else {
      $('#me').css("display","none"); // Or you can choose to .hide();
}

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

Executing JavaScript functions within static files in Django

I can't figure out why I'm unable to invoke a javascript function when clicking my Bootstrap button in a Django project. In my directory, I have set up the static folder as "main/static/main/js/script.js". While I can successfully load the stati ...

javascriptdjangobootstrap-4bootstrap-5

Is it acceptable to include the bundled main.js file in the gitignore for a HUGO project?

Is it possible to exclude the bundled main.js file from a HUGO project by adding it to .gitignore? ...

javascripthugo

What is the method for confirming the returned response string value in Vue js?

I am having trouble checking the response values of a `Vue` API request. I attempted to use `resp.data == "-1"`, but it is not yielding the desired outcome. Can someone assist me in determining how to properly check the response value in `Vue.js`? Vue.js ...

javascriptvue.jsvuejs2vue-component

Manipulating Data in AG-GRID with AngularJS: A Guide to External Editing

Currently, I'm in the process of developing a single-page application that utilizes AngularJS, UI-Router, and AG-GRID. However, I've encountered an issue with updating AG-GRID's data from an external form. Here is a breakdown of the problem ...

javascriptangularjsag-grid

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

javascriptjqueryhtmlcss

Looking to incorporate a pre-checked checkbox using Angular Material

I'm facing an issue with the following code snippet: <ng-container matColumnDef="Estado"> <th mat-header-cell *matHeaderCellDef>Estado</th> <td mat-cell *matCellDef=""> <mat-checkbox *ngIf ...

htmlangularcheckboxangular-material

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

javascripthtmlcss

Administering User Settings for Subsequent Visits

My website now includes a notification feature for showcasing new updates. The notification is strategically placed at the top of the website to capture users' attention. With the help of jQuery, I have created a function that allows users to hide the ...

phpjqueryajaxcookies

Creating a persistent hover effect

Utilizing primarily CSS, along with background images and adjacent selectors, I am creating a page that displays unique human-readable text information when the user hovers over horizontally stacked images. The textual information is presented in a div on ...

jquerycsshtmlhover

Deep-Dive into Template Binding in KnockoutJS

So, here's the situation: I have a list of arrays grouped based on certain criteria. My task is to render a list or section for each criteria and within each section, display a list of objects as HTML. Since I am new to KnockoutJS and just started usi ...

jqueryknockout.jstemplatebinding

What is the best way to specify a function parameter as a Function type in TypeScript?

I'm currently delving into the world of TypeScript and I am unsure about how to specify a function parameter as a function type. For instance, in this piece of code, I am passing a setState function through props to a child component. const SelectCity ...

javascriptreactjstypescripttypescript-genericsreact-typescript

Can you explain the {| ... |} syntax in JavaScript to me?

While reviewing a javascript codebase, I stumbled upon a section of code that appears as follows: export type RouteReducerProps = {| error?: Error, isResolving: boolean, isResolved: boolean, hasFailed: boolean, |}; Upon closer inspection, it seem ...

javascriptsyntax

Understanding the differences between jquery's addClass method and the .css()

After creating a function to set a background on a click event, I encountered an issue. I attempted two different methods, expecting both to be successful. However, only the .css() version worked while the addClass method failed. Why is this happening? fu ...

jquerycss

Adding CSS code to my index.css file in React is not reflected in my application

I've been following a tutorial on YouTube about reactJS, and the YouTuber recommended importing a CSS file into index.css to properly style the website. However, when I tried copying the CSS code and importing it into both App.js and Index.js, nothing ...

cssreactjs

Tips for transferring data and executing a PHP script without page refresh

In my quest to access a product API from a web interface seamlessly, without causing any disruption to the user experience, I have encountered some challenges. The webpage and the main machine operate on separate servers, forcing me to resort to using PHP ...

phpjavascriptajaxjquery

Functionless Ajax post request

Having a bit of trouble with a simple problem and I can't seem to spot the error. Would appreciate any help or insights you might have. Here's the issue at hand: $http({ url:'api/create_plane.php', method: "POST", data: { ...

phpjqueryangularjsajax

React functional components can utilize switch cases for conditional logic

I am attempting to create a multi-step form using a switch case, but for some reason, changing the state with nextPrev does not update the case. export const FormSteps = ({items, pending}) => { const [step, setStep] = useState (2) const nextS ...

javascriptreactjsswitch-statement

The communication between Firefox and the server appears to be interrupted as it stops receiving responses after a certain number of HTTP requests. In this specific

For some reason, this strange behavior is only occurring in Firefox. It seems that after a certain amount of time, the browser starts sending OPTIONS requests without receiving any responses - no status, no headers, nothing I can identify in the debug cons ...

javascriptnode.jsreactjshttpaxios

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

htmlcsscss-transitions

Issue: Django formview post function not triggered upon using JQuery post method

Whenever the "search" button is clicked, my goal is to invoke SearchView. However, after inserting a few print statements into the code, it became evident that although SearchView is being triggered, the post function within it fails to execute. Here is t ...

jqueryajaxdjangojquery-uidjango-forms