I was making a collapsible accordian and found two things that I want to change. I am following this website. I am unable to do some of the things. Like the hover is not working same as that and secondly that after opening the color is different. Please have a look and help me in figure it out.
$(document).ready(function(){
$(".research-group-header").click(function(){
// self clicking close
if($(this).next(".research-group-body").hasClass("active")){
$(this).next(".research-group-body").removeClass("active").slideUp()
$(this).children("span").removeClass("fa-minus").addClass("fa-plus")
}
else{
$(".research-group .research-group-body").removeClass("active").slideUp()
$(".research-group .research-group-header span").removeClass("fa-minus").addClass("fa-plus");
$(this).next(".research-group-body").addClass("active").slideDown()
$(this).children("span").removeClass("fa-plus").addClass("fa-minus")
}
})
}) .sec{
max-width:800px;
display: block;
margin: auto;
}
.sec .research-group{
/*box-shadow: 0px 0px 20px #d4d4d4;*/
margin-bottom: 2px;
float: left;
width: 100%;
}
.sec .research-group .research-group-header h3{
cursor: pointer;
color: #422b31;
position: relative;
background-color: #d8d8d8;
margin:0;
padding:15px 20px;
font-weight: 500;
font-size: 20px;
}
.sec .research-group .research-group-header {
position: relative;
}
.research-group-header:hover {
opacity: 0.2;
}
.sec .research-group .research-group-header span{
position: absolute;
right:20px;
top:12px;
height:25px;
width:25px;
color:#422b31;
/*background-color: #ffffff;*/
/*border-radius:50%;*/
text-align: center;
line-height:25px;
font-size: 20px;
}
.sec .research-group .research-group-body{
padding:20px;
}
.sec .research-group .research-group-body{
display: none;
}
.sec .research-group .research-group-body p{
font-size: inherit;
line-height: 24px;
color: #444444;
margin:0px;
} <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="sec">
<div class="research-group">
<div class="research-group-header">
<h3>Heading One</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-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 veniamLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
<div class="research-group">
<div class="research-group-header">
<h3>Heading Two</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-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 veniamLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
</div> <!-- sec -->I have written the code on codepen
Hey so changed a few things to get it working as expected.
Setting the background-color on hover, rather than opacity so you don't affect the child element (the texts colour). I'm guessing you tried that but it wouldn't work. The main takeaway here is the !important that you can put after a css setting to give it priority. I think the bootstrap was applying settings that were interfering, so remember the !important; to force a css attribute.
The other thing is I added a css class for the header element called header-active.. And just toggling that in a similar way to the body, to lock the change while it is active.
Hope it is clear to you what has changed and this helps.
$(document).ready(function(){
$(".research-group-header").click(function(){
// handle state of header
if($(this).children("h3").hasClass("header-active")) {
$(this).children("h3").removeClass("header-active")
} else {
$("h3").removeClass("header-active")
$(this).children("h3").addClass("header-active")
}
// self clicking close
if($(this).next(".research-group-body").hasClass("active")){
$(this).next(".research-group-body").removeClass("active").slideUp()
$(this).children("span").removeClass("fa-minus").addClass("fa-plus")
}
else{
$(".research-group .research-group-body").removeClass("active").slideUp()
$(".research-group .research-group-header span").removeClass("fa-minus").addClass("fa-plus");
$(this).next(".research-group-body").addClass("active").slideDown()
$(this).children("span").removeClass("fa-plus").addClass("fa-minus")
}
})
}) .sec{
max-width:800px;
display: block;
margin: auto;
}
.sec .research-group{
/*box-shadow: 0px 0px 20px #d4d4d4;*/
margin-bottom: 2px;
float: left;
width: 100%;
}
.sec .research-group .research-group-header h3{
cursor: pointer;
color: #422b31;
position: relative;
background-color: #d8d8d8;
margin:0;
padding:15px 20px;
font-weight: 500;
font-size: 20px;
}
.sec .research-group .research-group-header {
position: relative;
}
.sec .research-group .research-group-header span{
position: absolute;
right:20px;
top:12px;
height:25px;
width:25px;
color:#422b31;
/*background-color: #ffffff;*/
/*border-radius:50%;*/
text-align: center;
line-height:25px;
font-size: 20px;
}
.sec .research-group .research-group-body{
padding:20px;
}
.sec .research-group .research-group-body{
display: none;
}
.sec .research-group .research-group-body p{
font-size: inherit;
line-height: 24px;
color: #444444;
margin:0px;
}
.research-group-body, .active {
background-color: #F4F4F4;
}
.header-active {
background-color: #F4F4F4 !important;
}
.research-group-header h3:hover {
background-color: #F4F4F4 !important;
} <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="sec">
<div class="research-group">
<div class="research-group-header">
<h3>Heading One</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-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 veniamLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
<div class="research-group">
<div class="research-group-header">
<h3>Heading Two</h3>
<span class="fa fa-plus"></span>
</div>
<div class="research-group-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 veniamLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</div>
</div> <!-- research-group -->
</div> <!-- sec -->