Welcome to Designer Blog here i have posted Accordion Slider with JavaScript
without using Jquery Plugins . it can use as menu and for content slider
Step1:
These are two output which can produce using this Accordion Javascript
Script:
<script type="text/javascript">
$(function () {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true, true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true, true).slideUp('normal');
}
});
});
$(document).ready(function () {
$('.menu > li > a.active').next().stop(true, true).slideDown('normal');
});
</script>
Style:
.accordionmenu {
height: auto;
padding-left: 10px;
}
.accordionmenu > li > a {
background: #ededed url("../images/down-arrow.png") no-repeat scroll 183px 10px;
border-bottom: 1px solid #fff;
color: #333;
display: block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
font-weight: normal;
height: 2.75em;
line-height: 2.75em;
position: relative;
text-indent: 1em;
width: 100%;
}
.accordionmenu ul li a {
background: #e0e0e0 none repeat scroll 0 0;
border-bottom: 1px solid #efeff0;
color: #003767;
display: block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 0.923em;
font-weight: 400;
height: 2.75em;
line-height: 2.75em;
position: relative;
text-indent: 1.75em;
width: 100%;
}
.accordionmenu ul li a.active {
color: #007db1;
}
.accordionmenu ul li:last-child a {
border-bottom: 1px solid #fff;
outline: 0 none;
}
.accordionmenu > li > .accordionmenu > li > a.active {
background: #ededed url("../images/uparrow.png") no-repeat scroll 183px 10px;
border-bottom: 1px solid #fff;
color: #007db1;
outline: 0 none;
}
.accordionmenu > li > a.active {
background: #ededed url("../images/uparrow.png") no-repeat scroll 183px 10px;
border-bottom: 1px solid #fff;
color: #007db1;
outline: 0 none;
}
Html Code:
<div class="pure-u-1 border-bttms">
<ul class="accordionmenu" style="padding-left: 0px; width: 100% ! important;">
<li class="item1"> <a href="#" class="active" style="font-size: 18px; background-position: 685px 10px; background-color: #ededed; color: #333333;">Review of the Application Documents <span class="job-labl"></span></a>
<ul style="display: block;">
<li class="job-list">axccor ssions should come from government through the ministry in charge of international borrowing </li>
<li class="job-list">All requests should indicate that the project is within development priorities</li>
<li class="job-list">The request for funding should be supported by an economic feasibility study, projected cash flow and the financing plan </li>
</ul>
</li>
<li class="item2"> <a href="#" style="font-size: 18px; background-position: 685px 10px; background-color: #ededed; color: #333333;">Initial Assessment <span class="job-labl"></span></a>
<ul style="display: none;">
<li class="job-list">Review of the submission and
evaluation of the economic feasibility process allows the ADFD to
understand the project, and coordinate with other financing institutions
involved in funding the projects. </li>
</ul>
</li>
<li class="item3"> <a href="#" style="font-size: 18px; background-position: 685px 10px; background-color: #ededed; color: #333333;">Project Appraisal <span class="job-labl"></span></a>
<ul style="display: none;">
<li class="job-list">The appraisal process allows ADFD to
ascertain the economic conditions, review the soundness of the
feasibility study, assess the validity of the cost estimate and assess
the capabilities of the beneficiary in administering, executing,
operating and maintaining the project. </li>
<li class="job-list">(ADFD may accept appraisal reports conducted by one of the other financing institutions.) </li>
</ul>
</li>
<li class="item4"> <a href="#" style="font-size: 18px; background-position: 685px 10px; background-color: #ededed; color: #333333;">Loan Approval <span class="job-labl"></span></a>
<ul style="display: none;">
<li class="job-list">Once approved by ADFD’s Board of
Directors, the beneficiary will be notified and the loan negotiation
process will commence in preparation for the loan signature. </li>
</ul>
</li>
</ul>
</div>
Output:
Enjoy Folks
