How about this: "Is it possible for the accordion to open when clicked and show

Screenshot illustrating the issue

I need assistance with implementing a hover preview for the contents of the accordion, followed by keeping it open upon clicking. The codepen link is provided below for reference:

Visit the codepen here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Accordion with symbols</h2>
<p>In this example, each button in the accordion features a "plus" sign. When clicked, the "plus" sign transforms into a "minus" sign.</p>

<div>
 <button id="acchead" class="accordion">Section 1</button>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  
   <button id="acchead" class="accordion">Section 2</button>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  
  <button id="acchead" class="accordion">Section 3</button>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>
javascripthtmljquerycss

Answer №1

Is it something similar to this?

document.querySelectorAll('button.accordion').forEach(btn=>
  {
  btn.onclick = event => btn.classList.toggle('active')
  })
.accordion {
  background-color : #eee;
  color            : #444;
  cursor           : pointer;
  padding          : 18px;
  width            : 100%;
  text-align       : left;
  outline          : none;
  font-size        : 15px;
  transition       : 0.4s;
  padding          : 1em;
  border           : 1px solid blue;
  }
.active, 
.accordion:hover {
  background-color : #ccc;
  }
.accordion:after {
  content          : '\002B';
  color            : #777;
  font-weight      : bold;
  float            : right;
  margin-left      : 5px;
  }
.accordion.active:after {
  content          : '\2212';
  }
.accordion-body {
  border           : 1px solid red;
  max-height       : 0;
  transition       : max-height 0.15s ease-out;
  overflow         : hidden;
  }
.active + div.accordion-body,
.accordion:hover + div.accordion-body {
  max-height       : 500px;
  transition       : max-height 0.25s ease-in;
  }
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is
  replaced with a "minus" sign.</p>

<div>
  <button class="accordion">Section 1</button>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
  </div>

  <button class="accordion">Section 2</button>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
  </div>

  <button class="accordion">Section 3</button>
  <div class="accordion-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
  </div>
</div>

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

Contradictory jQuery extensions

After exploring this site as part of my web coding self-study, I decided to register so I could ask a specific question. Currently, I am in the process of developing my new website and ran into an issue on a test page (www.owenprescott.com/home.html). The ...

javascriptjqueryhovermosaic

The object for checking Ajax connections is not providing any values

I've been working on creating a unique AJAX connection check object, but unfortunately I'm struggling to get it to function properly. :/ Here's the object structure: function Connection(data){ this.isConnected = false, this.check = funct ...

javascriptjqueryajax

The variable that was posted is not being successfully transferred within the query

There seems to be an issue with retrieving data from the ajax call in ajaxcall.php and assigning it to $place = $_POST['place']; in listplace.php. Despite this problem, the code runs smoothly otherwise. I've tried numerous times to get the ...

javascriptphpjqueryajax

How should I manage objects that are passed by reference in the context of functional programming?

Lately, I have been experimenting with some code in an attempt to delve deeper into functional programming. However, I seem to have hit a snag. I am struggling with handling an object. My goal is to add key-value pairs to an object without reassigning it, ...

javascriptfunctional-programmingjavascript-objects

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

htmlcsslayoutpseudo-element

Having difficulty retrieving data from JSON file using Backbone framework

When I click on the div, I am attempting to retrieve JSON data but am unable to view the output. I am utilizing Backbone Collection to fetch JSON data. I have tried displaying the JSON data in the console as well as within another div. The contents of the ...

javascriptjqueryjsonbackbone.js

Issue with React's MaterialUI Select Component not displaying the values passed as props

In my component, I have a FormControl element that includes a Select element accepting an array of options for MenuItem options, as well as a value as props. The component code looks like this: const TaxonomySelector = (props) => { const { isDisabled, t ...

javascriptreactjsreact-hooksmaterial-uireact-component

Interacting with react-virtualized: accessing Grid's public functions

Trying to utilize the public method recomputeGridSize on a Grid component that I am currently rendering. I have set up the ref, but when attempting to call the method, it seems like it is not accessible. Outlined below is where the ref is established with ...

javascriptreactjsreact-virtualized

Error encountered while trying to install the node module, code 1. Installation failed

npm ERR! code 1 npm ERR! path D:\Neneng\a) Neneng_Pribadi File\2] Raynar abiyu diera\Rays DEV\Atomic BOT\node_modules\canvas npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ...

javascriptnode.jsnpmcanvas

What could be the reason why I am unable to choose my radio button? What error am I

The output can be found here... I am struggling to use a radio button and cannot seem to select it. Can someone please explain what issue I am facing? Any help would be greatly appreciated. const [value, setValue] = React.useState({ yes:"", no:"" ...

javascriptreactjsreact-hooksmaterial-ui

I am getting NaN as the output from my function, but I am unsure of the reason behind

For pracitce, I have created this code to calculate the total amount spent on gas and food using arrays. However, I am encountering an issue where it is returning NaN. const gas = [20, 40, 100]; const food = [10, 40, 50]; function total(gas, food) { ...

javascript

Learning the process of extracting Fast Fourier Transform (FFT) data from an audio tag within

I am struggling to retrieve the FFT data from an <audio> tag without any syntax errors. After reviewing the Web Audio API documentation, I have written a sample code snippet as follows: <audio id="aud" controls="controls" src="test.mp3"></a ...

htmlaudiofft

Searching for values in nested arrays using lodash.find

Presented below is an array where I aim to employ lodash for item search: [ { "itemA": "apple", "itemB": [ { "itemC": "1", "itemD": "red apple" }, { "itemC": "2", "itemD": "green apple" }, ...

javascriptarraysnode.jslodash

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

htmlcss

The compilation of the Angular application is successful, however, errors are arising stating that the property does not exist with the 'ng build --prod' command

When compiling the Angular app, it is successful but encountered errors in 'ng build --prod' ERROR in src\app\header\header.component.html(31,124): : Property 'searchText' does not exist on type 'HeaderComponent&apo ...

javascriptangulartypescriptbuild

Open a separate window by clicking on an image using JQuery

I've been trying to figure out how to open an image in a new tab when the user clicks on the thumbnail, but none of the solutions I've attempted seem to be working for me. Here is the jQuery code I have tried: $('#imagelink').click(fu ...

jqueryonclick

The Quickest Way to Retrieve Attribute Values in JavaScript

I'm trying to access a specific attribute called "data-price". Any tips on how I can retrieve the value of this attribute using this syntax: Preferred Syntax div[0].id: 48ms // appears to be the quickest method Alternative Syntax - Less Efficient ...

javascriptjqueryperformance

What is the best way to position text next to an image?

My dilemma involves aligning images from left to right with text beside each image. Here is a snippet of the code I used: <div> <p style="float: left;"><img src="images/pic1.jpg" height="141px" width="212px" border="0px"></p> & ...

htmlcsstextalignment

Engaging with a JSON data structure

I have experience using ajax for writing to sessions and performing inserts, but now I need to receive a response. While I've managed to get it working somewhat by going through examples, I'm currently stuck at a certain point. I am in search of ...

phpjqueryajaxjson

Utilizing FCKEditor to incorporate dimensions of width and height into image elements

I'm currently facing an issue while attempting to specify width and height for images within an old WYSIWYG FCKEditor. The challenge arises when trying to retrieve the naturalWidth/naturalHeight properties, as they return values of 0. What could I be ...

javascriptjqueryimagefckeditor