Develop Reference

I have three drop down button I want to click the specific dropdown and pop up the list and display on the that specific click dropdown , not in all

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>

Hide elements within tabs dynamically in jQuery

Before I developed a functionality for when you have only one set of tabs. Now the aApp is growing and that tabs functionality is failing since there are more sets of tabs.
The first time the function was like this:
var iconTabs = function () {
$('#icons-tabs a:not(:first)').addClass('inactive');
$('.icons-container').hide();
$('.icons-container:first').show();
$('#icons-tabs a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')) {
$('#icons-tabs a').addClass('inactive');
$(this).removeClass('inactive');
$('.icons-container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
};
And the html:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
Now the html has a second section and I still have to add 3 more, so now it is like this:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
<div id="fragment-2" class="fragments text-center">
<div class="icons-container" id="tab5C">
{{!-- Content --}}
</div>
<div class="icons-container" id="ta62C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
I have created a JSFiddle in case you want to play:
http://jsfiddle.net/ju3a9zx5/
My mission is to do it dynamic and that every set of tabs has separate behaviour. As you may see in the JSFiddle: the second set of tabs doesn't work, and I want them to have the same behaviour as the first one, but separate, one set of tabs don't have to interfere with the others.

You are going to want to use classes instead of ids to target your tabs. If you see my example below, there are only a few changes:
I replaced id="tabs" and id="tabs2" with class="tabs"
I changed the event handlers to target the class instead of the ids
When finding the related a tags I use siblings()
When finding the related .container I use .nextUntil() to find the container beneath in the DOM
When showing the initial container classes. I use $('.tabs').next('.container')
$(document).ready(function() {
$('.tabs a:not(:first)').addClass('inactive');
$('.container').hide();
$('.tabs').next('.container').show();
$('.tabs a').click(function() {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) { //this is the start of our condition
$(this).siblings('a').addClass('inactive');
$(this).removeClass('inactive');
$(this).parent().nextUntil(':not(.container)').hide();
$('#' + t + 'C').fadeIn('slow');
}
});
});
.tabs {
width: 100%;
height: 30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {
cursor: pointer;
}
.tabs a {
float: left;
list-style: none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-right: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
outline: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;
;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display: block;
background: #FFF;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-decoration: none;
outline: none;
}
.tabs a.inactive {
padding-top: 5px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
color: #666666;
background: #EEE;
outline: none;
border-bottom: solid 1px #CCC;
}
.tabs a:hover,
.tabs a.inactive:hover {
color: #5685bc;
outline: none;
}
.container {
clear: both;
width: 100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align: left;
padding-top: 20px;
}
.container h2 {
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
color: #5685bc;
}
.container p {
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.3;
font-size: small;
}
.container ul {
margin-left: 25px;
font-size: small;
line-height: 1.4;
list-style-type: disc;
}
.container li {
padding-bottom: 5px;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<a id="tab1">test1</a>
<a id="tab2">test2</a>
<a id="tab3">test3</a>
<a id="tab4">test4</a>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
<div class="tabs">
<a id="tab5">test1</a>
<a id="tab6">test2</a>
<a id="tab7">test3</a>
<a id="tab8">test4</a>
</div>
<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>

Ok played around with your fiddle. First remark: change id="tabs" to class="tabs", also change the selectors in your javascript and css. With that change it should get you up and running.
From a developer point of view I would create a jQuery plugin and throw the code in an each() function to make this even more flexible, better scalable and maintanable.

Dropdowns to Collapse when clicking outside

I am a newbie in coding and I wonder if it's possible to create multiple dropdown menus, and whenever you click outside an opened box, I want it to be collapsed. I am sharing the code I wrote but it's not working since one dropdown is collapsing when clicking outside, but the other one isn't. Can you help me with that? I'm sharing the code and I want 3 dropdown menus. I'm struggling with this for weeks now and I haven't succeeded yet. Thanks in advance!
HTML Code
<div class="container">
<span class="Agencymenu">Home</span>
<span class="Agencymenu">News</span>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Team 1</button>
<div class="dropdown-content" id="myDropdown">
<span class="Agencymenu">Link 1</span>
<span class="Agencymenu">Link 2</span>
<span class="Agencymenu">Link 3</span>
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2" onclick="myFunction2()">Team 2</button>
<div class="dropdown-content2" id="myDropdown2">
<span class="Agencymenu">Link 1</span>
<span class="Agencymenu">Link 2</span>
<span class="Agencymenu">Link 3</span>
</div>
</div>
</div>
CSS Code
.Agencymenu {
font-family: 'AGENCYB' !important;
font-weight: bold;
font-size: 24pt;
color: #FFFFFF;
}
.container {
overflow: hidden;
background-color: #30333c;
font-family: Arial;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:AGENCYB;
font-size:30px;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: #0C0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30333c;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container2 {
overflow: hidden;
background-color: #30333c;
font-family: Arial;
}
.container2 a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown2 {
float: left;
overflow: hidden;
}
.dropdown2 .dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:AGENCYB;
font-size:30px;
}
.container2 a:hover, .dropdown2:hover .dropbtn2 {
background-color: #0C0;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #30333c;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content2 a:hover {
background-color: #0C0;
}
.show2 {
display: block;
}
JS Code:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show2')) {
myDropdown.classList.remove('show2');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn2')) {
var myDropdown2 = document.getElementById("myDropdown2");
if (myDropdown2.classList.contains('show2')) {
myDropdown2.classList.remove('show2');
}
}
}

if you are okay using CSS only solution and you need dropdown on hover, you can simply use this code
.dropdown:hover .dropdown-content {display: block}
here is the fiddle https://jsfiddle.net/hkred6d7/1/
if you need it on click, let me know here in comment. it will require JS

It would be a lot easier with jQuery, but here is an example with vanilla JS. The key here is to reuse a css class for all dropdowns
https://jsfiddle.net/fyjjzhqw/
//HTML
<body>
<div class="wrapper">
<div class="Dropdown">
<div class="Dropdown__btn">Dropdown 1</div>
<ul class="Dropdown__list">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
<div class="Dropdown">
<div class="Dropdown__btn">Dropdown 2</div>
<ul class="Dropdown__list">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
<div class="Dropdown">
<div class="Dropdown__btn">Dropdown 3</div>
<ul class="Dropdown__list">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
</div>
</body>
// CSS
.Dropdown__list {
display: none
}
.is-opened.Dropdown .Dropdown__list {
display: block
}
//JS
var dropdowns = document.querySelectorAll('.Dropdown');
var closeAll = function() {
dropdowns.forEach( function(current) {
current.classList.remove('is-opened')
})
}
var toggleDropdown = function(e) {
closeAll();
var dropdown = e.currentTarget.parentElement;
dropdown.classList.toggle('is-opened')
}
for (i = dropdowns.length - 1; i >= 0; i--) {
dropdowns[i].querySelector('.Dropdown__btn').addEventListener('click', toggleDropdown)
}

you can try using this https://jsfiddle.net/aswin_89/hkred6d7/9/
modified your JS a bit
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
event.target.nextElementSibling.classList.toggle("show2");
}
function clearClasses (target){
document.querySelectorAll('.dropdown-content.show2').forEach((item)=>{
if(event.target.nextElementSibling !== item)
item.classList.remove('show2');
})
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
clearClasses(event.target.nextElementSibling);
}

Open accordion on load with active class

I have an accordion on my website and I would like for the accordion to be open at the right level depending on where the active class is. I have made a JSFiddle.
JS:
$(document).ready(function ($) {
$('.servicesub').find('.servicesubitem').click(function () {
if ($(this).next().is(':visible')) {
//Collapse
$(this).next().slideToggle('fast');
$(this).removeClass('active');
// $("#footer-wrapper").animate({marginTop: "0px"}, 'fast');
} else {
//Expand
$(this).next().slideToggle('fast');
$(this).siblings().removeClass('active');
$(this).addClass('active');
//hide other panels
$(".servicesubli").not($(this).next()).slideUp('fast');
//$("#footer-wrapper").animate({marginTop: "200px"}, 'fast');
}
});
});
HTML:
<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
<li class="servicesubitem active">
<span class="subitem">Web Design,
<br>
Multimedia & Email</span><span class="fa1 fa-globe"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="domains.php">
<li>
Domain Registration
</li>
</a>
<a href="webdesign.php">
<li>
Web Design & Development
</li>
</a>
<a href="webhosting.php">
<li>
Web Hosting
</li>
</a>
<a href="email.php">
<li>
Managed Email Systems
</li>
</a>
</ul>
</div>
<li class="servicesubitem">
<span class="subitem">Vessel
<br>
Security</span><span class="fa1 fa-lock"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="tracking.php">
<li>
Yacht Tracking
</li>
</a>
<a href="ssas.php">
<li>
SSAS
</li>
</a>
<a href="#">
<li>
SAT C
</li>
</a>
</ul>
</div>
</div>
CSS:
* Service Sub */
.servicesub { padding:10px; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; }
.servicesub li a {text-decoration: none;}
.servicesub li a:hover {color:#fff;}
.servicesub li { background-color: #017CEB; }
.servicesub li:hover { background-color: #015BAC; }
.servicesub li.active { background-color: #015BAC; }
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block; width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; }
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; }
.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; }
.servicesubitem { cursor: pointer; }
.servicesubli { cursor: pointer; display: none; }
.servicesubli.default { display: block; }
.servicesubli ul { width: 100%; font-size: 14px;}
.servicesubli li { padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;}
.servicesubli a { text-decoration: none; color: #fff; }
.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;}
.servicesub .getintouch:hover { background-color: #00539f; }
.servicesub .getintouch h3 { color: #fff; text-align: center; }
.servicesub .getintouch p { color:#fff; text-align: center; }
As you can see the accordion works to click on and the active class (which is set manually for this demo) is there I just want it so that the correct accordion part is toggled when the page is loaded. Thanks in advance.

To recycle your logic, You can just add your .active class to whichever element you wish, then search for .servicesubli.active on ready. Observe the following...
<div class="servicesubli active">
$(function() {
[...]
$('.servicesubli.active').slideToggle('fast');
});
JSFiddle Link - demo
Per comments, if you wish to target off servicesubitem.active, just modify to the following...
$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast');
JSFiddle Link - demo - .servicesubitem.active selector

Well you just need to trigger the click event once the page is loaded like below:
$('.servicesub').find('.active').trigger( "click" );
See the jsfiddle here: http://jsfiddle.net/beroza/a1mbgyqx/

toggle images for expand all and collapse all

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.