Accordion clickable and hover?
Question
How to make Accordion menu both clickable and hover? In the following case, hover is working first time. But, once click event triggered, the hover is not working
The the above demo, hover is working initially. But if i try again after a mouse click, hover is not working
code here
.accordion-body{ display:none; } .accordion:hover div{ display:block; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function expandAccordionBody(){ var myDivElement = document.getElementById("accbody" ); var cStyle=window.getComputedStyle(myDivElement, null); if(cStyle.display=='block'){ myDivElement.style.display="none"; }else{ myDivElement.style.display="block"; } } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="accordion"> <div onclick="expandAccordionBody()"> Head </div> <div id="accbody" class="accordion-body"> Body </div> </div> </body> </html>
6 answers
solution1
1 2016-05-19 11:00:46
You will have to slightly modify your code and use jQuery's on to bind click and mouseover events and toggle for element visibility for this to be achieved
$("#acchead").on('mouseover click',function() { $("#accbody").toggle("show"); });
.accordion-body{ display:none; } .accordion:hover div{ display:block; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="accordion"> <div id="acchead"> Head </div> <div id="accbody" class="accordion-body"> Body </div> </div> </body> </html>
solution2
1 2016-05-19 11:07:55
Since you've tagged jQuery, I made this solution for you.
It works as followed:
When a moves his mouse over the head, the body is shown. When he leaves it, the body gets hidden.
When the user clicks on the head, the body is shown, and the hover is disabled. First he'll need to click the head again to close is, after that the hover works again.
I hope that this is what you are trying to achieve.
$(function() { $('.accordion-body').hide(); $('#acchead').on('click', function() { if ($(this).hasClass('clickActive')) { $('.accordion-body').hide(); $(this).removeClass('clickActive'); } else { $('.accordion-body').show(); $(this).addClass('clickActive'); } }).on('mouseenter', function() { if (!$(this).hasClass('clickActive')) { $('.accordion-body').show(); } }).on('mouseleave', function() { if (!$(this).hasClass('clickActive')) { $('.accordion-body').hide(); } }); });
#acchead { padding: 1em; border: 1px solid blue; } .accordion-body { padding: 1em; border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion"> <div id="acchead">Head</div> <div class="accordion-body"> Body </div> </div>
solution3
0 2016-05-19 10:54:18
Try the following:
.accordion:hover div{
display:block !important;
}
As Shoaib Iqbal mentioned, inline css overwrites stylesheets, so you need the important to overwrite the inline css on hover.
Alternatively you could try adding and removing a class in your js on click function. JS:
if(myDivElement.className == "accordion-body open"){
myDivElement.className = "accordion-body";//reset class
}else{
myDivElement.className = "accordion-body open";
}
CSS:
#accbody.open{
display:block;
}
solution4
0 2016-05-19 11:08:27
JS
if(cStyle.className.indexOf('block') == -1){
myDivElement.className=myDivElement.className + " block";
}else{
myDivElement.className = "accordion-body";
}
CSS
.hover {display:none;}
solution5
0 2016-05-19 11:14:58
Remove that hover CSS.
.accordion:hover div{
display:block ;
}
Just add the mouseout and mouseover event for the DIV .
<div onclick="expandAccordionBody()" onmouseover="expandAccordionBody1()" onmouseout="expandAccordionBody2()"> Head </div>
And the JS function is:
function expandAccordionBody1(){
var myDivElement = document.getElementById("accbody" );
myDivElement.style.display="block";
}
function expandAccordionBody2(){
var myDivElement = document.getElementById("accbody" );
myDivElement.style.display="none";
}
Hope this helps.
solution6
0 2016-05-23 09:32:27
Working code here Demo
Code can be improvised.
css
.accordion-body{display:none;}.accordion:hover div{display:block;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.