My Bloggers Code: Accordion Sidebar Dropdown Menu for Bloggers

Copy & paste the below code in Box and put in add Html segments..

<!doctype html>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

.linklist {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 9;
    top: 0;
    left: 0;
    background: #193559;
    overflow-x: hidden;

}
.accordion {
    background-color: #EDD326;
    color: #000000;
    cursor: pointer;
    padding: 6px 10px;
    width: 100%;
    border: 1px solid;
    border-color:#E3C817;
    text-align: left;
    outline: none;
    font-size: 13.5px;
    transition: 0.4s;
    font-family: 'Cuprum', sans-serif;
    font-weight: bold;
}

.active, .accordion:hover {
    background-color: #B09A09;
}

.accordion:after {
    content: '\002B';
    color: #000000;
    font-weight: bold;
    float: right;
    margin-left: 5px;

}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 5px;
    background-color: #C7AE0E;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;

}

.panel li{
    padding: 2px 2px 2px 10px;
    text-decoration: none;
   font-family: 'Cuprum', sans-serif;
    font-size: 15px;
    color: #000000;
    display: block;
    border-bottom: 1px solid ;
    border-color:#D6BC13;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;

}

.panel a{
padding: 2px 2px 2px 0px;
    text-decoration: none;
     font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    color: #000000;
    display: block;

    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;

}

.menu li{
    padding: 0px 0px 0px 0px;
   text-decoration: none;
   font-family: 'Cuprum', sans-serif;
    font-size: 15px;
    color: #000000;
    display: block;
    background-color: #C7AE0E;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;
border-bottom: 1px solid ;
    border-color:#D6BC13;
}

.menu a{
padding: 2px 12px 2px 10px;
    text-decoration: none;
     font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    color: #000000;
    display: block;

    background: #C7AE0E;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: 0px;

}

a:hover {
    background-color: #F0682E;
    text-decoration: underline;

}

a:active {
    background-color: black;
}

a:active {
    background-color: #D4AF28;
    text-decoration: underline;

}

</style>

<div id="linklist" class="sidebar">

<div id="menu" class="menu">

<h2 style="background-color: #BA1513; border-bottom: 1px solid rgb(34, 34, 34); border-bottom-width: 1px; color: yellow; font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 12.61px; font-stretch: normal; line-height: normal; margin: 10px 0px 0em; padding: 10px 10px 0.8em;">
Select Your Session </h2>

<div class="menu">

<li class="menu-li"><a href="https://testblog8020.blogspot.in/"style=margin-bottom:0px;text-color:#000000;>Link list 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;></i></a></li>

<li class="menu-li"><a href="https://spatestblog101.blogspot.in/2018/05/tantra-info-what-we-do-in-tantra.html "style=margin-bottom:0px;text-color:#000000;>Link list 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;></i></a></li>

</div>

<button class="accordion">Dropdown 1</button>
<div class="panel">

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;></i></a></li>

</div>

<button class="accordion">Dropdown 2 </button>
<div class="panel">

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= margin-top:0px;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= margin-top:0px;></i></a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;>Submit your Story <i class="fa fa-angle-double-right" aria-hidden="true"style= margin-top:0px;></i></a></li>

</div>

<button class="accordion">Dropdown 3 </button>
<div class="panel">

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

<li class="panel-li"><a href="YOUR LINK GOES HERE"style=margin-bottom:0px;text-color:#000000;><i class="fa fa-angle-double-right" aria-hidden="true"></i>  Submit your Story </a></li>

</div>

<button class="accordion">Dropdown 4 </button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="menu">

<a style=" line-height: 1.4em; "><a href=" YOUR LINK GOES HERE" style="color: black;"> Link List 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;"></i></a>

<a style=" line-height: 1.4em; "><a href=" YOUR LINK GOES HERE" style="color: black;"> Link List 1 <i class="fa fa-angle-double-right" aria-hidden="true"style= float:right;padding-right:20px;"></i></a>

</a></a></div>

</div></div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
});
}
</script>

</!doctype>