I am trying to swap images of collapse all and expand all on click but i am reallly not getting it please can any one help me ... thanks in advance
here is the the link for the sample
http://www.ornusweb.com/showcase/checking/collapsible-menu.html
everything is working fine except the expan all collapse all buttons wen we click on it.
it should swap images
please help me !!!
Here is the css
body {
font: 10pt Arial, Helvetica, Sans-serif;
}
a {
text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
float: left;
}
.expand_all{
cursor: pointer;
}
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 90%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 624px;
}
.example_menu ul {
display: none;
list-style: none;
padding: 0;
}
#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
margin: 0;
}
#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
background-image: none;
margin: 0;
padding-bottom: 1px;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 109px;
}
.example_menu a {
color: #000;
cursor: pointer;
display: block;
font-weight: bold;
margin-left: 0;
padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
}
.example_menu a.expanded {
background: #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
}
.example_menu a.collapsed {
background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul a {
background: #e8e8e8;
border-top: 2px solid #fff;
color: #000;
display: block;
font-weight: normal;
padding: 2px 2px 2px 10px;
width: 119px;
}
.example_menu ul a:link {
font-weight: normal;
}
.example_menu ul a:hover {
background : #f5f5f5;
text-decoration: underline;
}
.example_menu li.active a {
background: #fff;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
background: transparent url('images/footer.jpg') no-repeat 0 0;
border-top: 2px solid #fff;
height: 9px;
line-height: 15px;
margin: 0 0 10px 0;
width: 131px;
}
.example_menu .footer span {
display: none;
}
/* nadeem css */
.newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
.newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
.newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}
}
here is the js
$(document).ready(function() {
setTimeout(function() {
// Slide
$('#menu1 > li > a.expanded + ul').slideToggle('medium');
$('#menu1 > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#example1 .expand_all').click(function() {
$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#example1 .collapse_all').click(function() {
$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
}, 250);
});
and here is the html
<div id="example1">
<div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
<ul id="menu1" class="example_menu">
<li><a class="expanded">Section A</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section B</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section C</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
</ul>
</div>
Guessing it is the two images in the top, you could do this:
<div>
<a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
<img class="img-swap" src="images/toggle-buttons_01.png">
</a>
<a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
<img alt="" src="images/toggle-buttons_02.png">
</a>
</div>
Simply hiding the irrelevant one....not really swapping images though.
Related
I have three drop down button that I style them using the same class. When I click any of them it pops up a list where I select any list under the dropdown and display it on the button.
The problem is that it's displaying in all of the three dropdowns even though I focus on the specific drop down and I am voiding to have along code by changing each an every dropdown an ID and target on it. If there's away to do it may you please help.
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
height: 0px;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20;
position: absolute;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>
You can try it like this:
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
I've also changed your css a little bit. I've removed height:0px from ul.menu and added display:none;
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>
You are not too clear in your answer, and you are providing no working code,
But If I get it, you need to show on the button the text you click in the submenu, like "emulating a select".
It's quite easy.
So, on the 3 main parents add a class
<div class="wrapCollect3 buttonParent">
[...]
<div class="wrapper buttonParent">
[...]
<div class="collecWrap buttonParent">
In js, add a function to retrieve them on click
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
call it like this:
// In your onclick function,
// given "el" as the clicked submenu button
let parent = getParentByClass(el, "buttonParent")
Now find the button inside the buttonParent of the clicked submenu, and set its text as the text you clicked in the submenu
parent.querySelector('button').innerText = el.getText();
Now you just need to fix the "hide" submenu when you click outside the submenu. I leave this exercise to you, because this is not "code solution" website, and we are here always to learn! Cheers!
/// Taken from Carsten Løvbo Andersen answer
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
//// Maybe there is some jquery version, but this is universal
/// this find parent by class name, giving a depth in search too
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
document.querySelectorAll("ul.menu li").forEach(function(el){
el.addEventListener('click', function(c){
let li = c.target;
let t = li.innerText;
let p = getParentByClass(li, 'parentButton');
p.querySelector('button').innerText = t;
$('.menu').hide();
});
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3 parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>
I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}
The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}
I have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it should close and that option should come in the menu.
example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
place the text "item name " in a span with an id named label1
and add the following
e(".dropdown_menu").click(function(event){
e("#label1").text(event.target.textContent.trim());
})
Snippet below
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
});
e(".dropdown_menu").click(function(event) {
e("#label1").text(event.target.textContent.trim());
console.log(this);
})
e(".table-cell-data").click(function(ev){
var that=this;
e(".table-cell-data").each(function(){
if(this.classList.contains("color_me") && this!=that){
this.classList.remove("color_me");
}
})
this.classList.add("color_me")
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
i want when the page loads the first division should be opened by default.also user preference will be taken if user wants to open the first accordion division then on load of a page the first div will be opened,if the users wants to change the preference to second division then second division will open
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li> main link1
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
<li> main link2
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">content fois</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">content ASP</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">content PTT</div>
</li>
</ul>
</div>
CSS
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active{
background-color: red;
}
jquery
jQuery(function ($) {
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function(){
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})
js fiddle
http://jsfiddle.net/dh7Cc/2/
Try to trigger a click event on the first h2 element
jQuery(function ($) {
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function(){
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
});
$h2s.first().click()
})
My problem is when i mouse over the fois header its text doesn't changes to white color i don't know where i am wrong.or what to include.please help me........
another problem when the fois tab is active the color of the text appear as white
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <link href="css.css" rel="stylesheet" />-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="accord.js"></script>
<style>
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active {
color: white;
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li>
main link1
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
<li>
main link2
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2 id="fois">FOIS</h2>
</li>
<li>
<h2>ASP</h2>
<div class="content">
<ul>
</ul>
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
content PTT
</div>
</li>
</ul>
</div>
<!-- wrap -->
</body>
</html>
accord file
jQuery(function ($) {
$('.accord li').hover(function () {
$(this).find('ul').stop(true, true).slideDown()
}, function () {
$(this).find('ul').stop(true, true).slideUp()
}).find('ul').hide()
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function () {
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})
Because it's wrapped in <a></a> tag and the others are not wrapped in <a>
Demo
<li>
<h2 id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>
You are declaring color: black; using inline CSS, which will be only overridden if you use !important in your stylesheet.
Secondly you need to target a element and not h2 because a will not inherit the parent elements color unless you specify something like a {color: inherit;} which will make all the a elements in your document inherit parent color, or to be specific you can use .accordion1 li h2 a {color: inherit;}, if you use this selector, than you don't have to target a else you need to as I've shared below..
.accordion1 li:hover h2 a {
color: white !important;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
I would suggest you to remove the inline style instead, and you won't have to use the !important anymore.
Demo
Change
<h2 id="fois">FOIS</h2>
To
<h2 id="fois">FOIS</h2>
And change
.accordion1 li:hover h2 {
To
.accordion1 li:hover h2,
.accordion1 li:hover h2 a {
Looks to me that your problem is with the inline style on the anchor element. This has a higher specificity than any style in a style sheet so should be used with moderation.
If you remove
color:black
from the anchor, and add:
color:black
to:
.accordion1 h2
That should do the trick.
Add Below class in your style
#fois a:hover{
color: white !important;
}