Accordion Slider and menu

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