Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance:

  • Press a button - one div flies off the screen while another div flies in.
  • Press the button again - Same div flies out, other div returns.

I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you.

$(document).ready(function() {
  $(".bookBox-1").click(function() {
    $(".main-title").slideUp("slow");
  });

  $(".bookBox-1").click(function() {
    $(".bookDescriptions-kinkyKenny").slideDown();
  });
});
.bookDescriptions-kinkyKenny,
.bookDescriptions-eatWhatYoureGiven {
  position: absolute;
  width: 1778px;
  height: 423px;
  top: 144px;
  left: 0;
  display: none;
}

.bookDescription-1,
.bookDescription-2 {
  position: relative;
  height: inherit;
  width: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-title {
  font: 100 125px 'Josefin Sans', sans-serif;
  position: relative;
  left: 151px;
}

Answer №1

function toggleBookDescription() {
  $(".main-title").slideUp("slow");
  $(".bookDescriptions-kinkyKenny").slideDown();
  $(".bookBox-1").unbind("click", toggleBookDescription);
  $(".bookBox-1").click(switchBookDescription);
}

function switchBookDescription() {
  $(".bookDescriptions-kinkyKenny").slideUp("slow");
  $(".main-title").slideDown();
  $(".bookBox-1").unbind("click", switchBookDescription);
  $(".bookBox-1").click(toggleBookDescription);
}
$(document).ready(function() {
  $(".bookBox-1").click(toggleBookDescription);
});

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

Clicking the button will trigger the onclick event

I'm working on a button component in TypeScript and I have encountered an issue with passing the event to the submitButton function. import * as React from 'react'; interface Props { className?: string; text: string; onClick?(event: Reac ...

PHP script to automatically update a table in a database upon the closure of a

I recently experimented with the following code snippet: <script> function myFunction() { return "You have not logged out of your account. Do you want to leave without logging out? "; } </script > <body onbeforeunload="return myFun ...

Loader built with JQuery to appear while AJAX processes data

I am currently facing a challenge with AJAX taking precedence in a JQuery function. My goal is to make the code more sequential, but using async doesn't seem to help. What I want to achieve is to show a "loader" while the script is running and then hi ...

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

Can custom HTML elements be designed to function similarly to standard ones?

What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...

Create a dynamic slideshow using a bootstrap carousel in conjunction with the powerful php glob() function

I'm struggling to create a homepage featuring a slider that pulls images dynamically from a subfolder within the Wordpress uploads directory. Here's my code: <div id="" class="carousel slide" data-ride="carousel"> <!-- Wrapper for sl ...

What is the best way to position the top line next to the border?

I've been attempting to create a falling line effect on the left side of the box's border, but I can't seem to figure out what's causing the issue. Below is the code snippet: @import url('https://fonts.googleapis.com/css ...

Fetching chat messages using an AJAX script depending on the timestamp they were sent

I am currently working on developing a real-time chat application with various rooms as part of my project. Progress has been smooth so far, but I am facing an issue with properly fetching the most recent chat messages from the database. The message table ...

Tips for incorporating a dynamic basePath into your NextJS project

For my new app, I am trying to include the groupID in the URL before the actual path, such as 'https://web-site.com/1/tasks'. The NextJs docs mention a basePath that is set at build time and cannot be modified. With numerous routes in my current ...

No action is triggered after submitting AJAX data in a WordPress environment

I'm currently working on developing a WordPress plugin that requires querying the database. However, I am facing challenges in getting it to function properly. Here is the code snippet that I have attempted: jQuery('#demo_ajax').submit(func ...

JavaScript for Office Spreadsheet Titles

I'm having trouble fetching the names of sheets from an external Excel file, as I keep getting an empty array. async function retrieveSheetNames() { const fileInput = <HTMLInputElement>document.getElementById("file"); const fileReader ...

What is the best method for accommodating various web devices effectively?

Those deciding to close this as not conducive, please read through the entire post. Specific questions will be posed at the end. Seeking practical examples and strategies. Situation As more and more people use devices like smart-phones and tablets to acce ...

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

Utilizing the Model-View-Controller architecture to efficiently transfer a collection

I'm attempting to send an email from my controller after receiving two images from a view. Despite numerous attempts, when I debug the Post method in my controller, the object always contains null values. However, logging the data being sent shows th ...

The delay between initiating a Next JS route by clicking and the corresponding page actually loading

Just launched my website at this link: I am experiencing a delay of up to 2 seconds between clicking the header links and the page loading. The site works fine in development and on localhost, so I'm not sure why there's such a slowdown on the l ...

Developing components through JavaScript

I am attempting to use JavaScript to create an element in my HTML using createElement, but there seems to be an issue in my code. HTML <button class="test_button">I am a test</button> <div class="test"></div> ...

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

Is there a way to change the style based on the route using react router? I want the description route to display in orange when the user is in the description route, white when in the teacher-add-course route, and green for all other routes. However, th ...

When making a fetch call in React, the response is the index.html file but Chrome displays an error saying Uncaught (in promise) SyntaxError: Unexpected token < in JSON

I have been encountering an issue while trying to retrieve data from my local express server and displaying it using React. The problem appears to be that instead of fetching the data, the index.html of the React app is being returned. In the network tab o ...

What's the best way to iterate through multiple objects within <td> tags using Vue.js?

I have an Array filled with multiple Objects, and now I am interested in iterating through each object as a <tr> within a <table>. I have successfully achieved this. However, some of these objects might contain nested objects. In such cases, I ...

Bringing in SCSS using Typescript, React, and Webpack

I am trying to utilize .scss classes by importing them and applying them to the className property of a React component. Here is the structure of my project : root/ ... config/ ... webpack.config.js src/ ... global.d.ts app/ ...