Accordion for controlling the start and stop of the content slider

I have a code snippet below for a Pure CSS content slider in an accordion that I've built. I'm wondering if it's feasible to control the start and stop of the Content Slider when the accordion opens and closes. Currently, the Content Slider continues running even when the accordion is closed. Is achieving this functionality possible with Pure CSS? If not, would it be achievable with Vanilla JavaScript (without JQuery)? Any insights or suggestions would be greatly appreciated. Thanks.

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}

/* Accordion styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}

.bold {
  font-weight:bold;
  color: #005bab;
}

.top {
  margin-top:-20px;
  text-align: center;
  font-size:13px;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
...

<div class="top"> 
   <p> 
      <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span></p> 
</div>


  ...
javascripthtmlcss

Answer №1

If you prefer to avoid using JavaScript, here is a verbose solution to achieve the desired result:

replace 

.ul:hover {
  animation-play-state:paused;
}

with

.input:checked~.tab-content .container .ul:hover {
  animation-play-state:paused;
}

.tab-content .container .ul{
  animation-play-state:paused;
}
.input:checked~.tab-content .container .ul {
  animation-play-state:running;
}

You can see the working solution in action on this CodePen: https://codepen.io/anon/pen/zzaKow

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 a Knex RAW MySQL query to insert new records into a database table

As someone new to working with MySQL, I have previously used PSQL in a similar manner. However, the following code is generating an error. return await db .raw( `INSERT INTO users(firstName, lastName, email, ...

javascriptmysqlnode.jsexpressknex.js

What is the method for obtaining the global coordinates of the bone's tail end in Three.js when there is no child bone connected?

If I were to retrieve the global coordinates of the head tip of the bone, it might look something like this: let worldpos_head_x = skinnedMesh.skeleton.bones[111].matrixWorld.elements[12] let worldpos_head_y = skinnedMesh.skeleton.bones[111].matrixWorld.el ...

javascriptnode.jsthree.js3d

The significance of package-lock.json: Understanding demands vs dependencies

Within the dependency object of package-lock.json, there exist both requires and dependencies fields. For example: "requires": { "@angular-devkit/core": "0.8.5", "rxjs": "6.2.2", "tree-kill": "1.2.0", "webpack-sources": "1.3.0" }, "d ...

javascriptnode.jsnpmpackage-lock.json

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Combining information once constructing a complex array structure in JavaScript

My reduce function is successfully building multiple levels of data, but I have encountered an issue. Currently, it organizes the data by employee first, then by date, area, and job. While all the data is displayed correctly at each level, I am now attempt ...

javascriptvue.js

Maintaining a JavaScript script within the local project directory and integrating it for use with Angular

I could use some assistance. I am currently working on an Angular project and making API calls (GET/PUT) to a remote server. In order to improve the performance of my application, I decided to store the necessary JS file locally in the assets folder. Init ...

javascriptangularsisense

"Looking for a way to eliminate the background of an image on NextJS? Learn

https://i.stack.imgur.com/zAsrJ.png When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content. <div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3"> <div cla ...

javascriptcssreactjsnext.jstailwind-css

The Zustand store does not reflect changes when the URL is updated

I have a Zustand store connected to the URL. See the code snippet provided below. import { create } from "zustand"; import { persist, StateStorage, createJSONStorage } from "zustand/middleware"; const pathStorage: StateStorage = { ge ...

javascriptreactjsdomnext.jszustand

Switching between states using JavaScript

Here is a code snippet I'm working with: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="C:\Users\rapandey\Documen ...

javascripthtmljqueryjquery-events

Exploring the distinctions among counterfeit, undercover, placeholder, and imitation functionalities within the Sinon library ( Sinon's fake compared to spy, stub

I've been struggling to grasp the distinctions between sinon library's fake, spy, stub, and mock. Can someone please shed some light on the subject for me? ...

javascriptnode.jsjestjsmocha.jssinon

Tips for fully accessing a website with javascript enabled through an android service

I've been attempting to extract data from a website node that includes JavaScript. In VB .NET, the code I typically use is as follows: Dim listSpan As IHTMLElementCollection = bodyel.getElementsByTagName("span") For Each spanItem As IHTMLElement In ...

javascriptandroidjsonvb.netjsoup

Is it possible for the useUser() function within the Auth0 nextjs-auth0 library to retrieve user information without relying on cookie data?

The useUser() method by Auth0 is designed to retrieve information about a logged-in user by calling the /api/auth/me endpoint. This triggers the handleAuth() function, which sets up Auth0 (creating a sessionCache instance, etc.) and calls profileHandler(re ...

javascriptauthenticationnext.jsauth0

How to Route in Angular 5 and Pass a String as a Parameter in the URL

I am currently working on an Angular project that focuses on geographic system data. The concept is as follows: I have a component with the route: {path: 'home'}. I aim to pass a geojson URL along with this route, making it look like this: {pat ...

javascriptangulartypescriptangular2-routing

Retrieve records with at least one connection, but display all of them

After creating this entry, it now consists of 2 tags - tag1 and tag2. { "id": "d87de1d9-b048-4867-92fb-a84dca59c87e", "name": "Test Name", "tags": [ { "id": "fa0ca8fd-eff4-4e58-8bb0-a1ef726f01d4", "name": "tag1", "organizationI ...

javascriptnode.jssequelize.js

Steps to incorporate a nested table in HTML with merged columns

A number of university groups have utilized my HTML table applications. Each university may have various groups, with each group currently consisting of only one student. The HTML code I am working with includes AngularJS as shown below: <table&g ...

htmlcssangularjshtml-table

Animating the size of an element with dynamic content

I am working on a feature where clicking on a card should display a summary. When a new summary is shown, I want the summary container to animate and align its position with the associated card (top). However, despite my efforts, I am facing an issue whe ...

javascriptjqueryhtmlcss

Choose a random node from Xpath with multiple nodes using JavaScript WebdriverIO

Is there a way to retrieve a random node from an Xpath that contains multiple nodes whose count varies weekly? I am looking for a solution that would work in one of two ways: Return the total number of nodes corresponding to the Xpath, allowing me to the ...

javascriptseleniumxpathwebdriver-io

Showing a Div after a designated time of page loading: A simple guide

While I have a good understanding of CSS, Javascript is still new territory for me. I could use some guidance on the following task. My goal is to display a fixed div at the bottom of the screen, but I only want it to appear after a specific delay, say 10 ...

javascriptjqueryhtmlcss

What is the best way to send an HTTP request in AngularJS to receive data in JSON format?

I am trying to create an AngularJS app that can send HTTP requests for JSON data. I have written the code in my index.html file to request JSON data using AngularJS, but for some reason, the JSON data is not being printed. When I check the console in Fire ...

javascriptjsonangularjs

How to dynamically insert elements into the HTML page using Angular

When my page first loads, it looks like this <body> <div class="col-md-12" id="dataPanes"> <div class="row dataPane"> Chunk of html elements </div> </div> <div class"col-md-12 text-right"> <input type="butt ...

javascriptjqueryhtmlcssangularjs