CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2555212
user2555212

Reputation: 171

Accordion clickable and hover?

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

demo

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>

Upvotes: 1

Views: 2758

Answers (6)

user2555212
user2555212

Reputation: 171

Working code here Demo

Code can be improvised.

css

.accordion-body{display:none;}.accordion:hover div{display:block;}

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

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>

Upvotes: 1

Shwetha
Shwetha

Reputation: 903

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.

Upvotes: 0

Alpan Karaca
Alpan Karaca

Reputation: 968

JS

if(cStyle.className.indexOf('block') == -1){
    myDivElement.className=myDivElement.className + " block";
}else{
    myDivElement.className = "accordion-body";
}

CSS

.hover {display:none;}

Upvotes: 0

gaynorvader
gaynorvader

Reputation: 2657

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;
}

Upvotes: 0

user2560539
user2560539

Reputation:

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>

Upvotes: 1

Related Questions