Accordion Toggle

Toggle up and down arrows in a simple accordion widget

HTML Markup

<div class="accordion">
<div class="accordion-head">
<h4 style="font-size:40px;margin:6px 0 10px 0">⬇</h4>

</div>
<div class="accordion-body">
<p> <span><strong>أرسل بحثك للتحكيم معنا</strong></span> <span>“لا تضيع فرصة النشر في احد افضل المجلات العلمية العربية”</span> <button><a href="https://ajsrp.com/send/">أرسل بحثك هنا</a></button></p> 
</div>

</div>

CSS

/*Accordian*/
.accordion {
width: 100%;
position:fixed;
right:0px;
top:0;
z-index:9999;
}
.accordion .accordion-head {
color: #fff;
background-color: #EB5B31;
position: relative;
padding: 0 4px;
cursor: pointer;
border-top: 0;
float:right;
margin-right:20px;
border-left:5px solid #fff;
border-right:5px solid #fff;
border-bottom:5px solid #fff;
border-radius:0 0 10px 10px; 
}
.accordion .accordion-head * {
cursor: pointer;
}
.accordion .accordion-head:hover {
opacity: 1;
}
.accordion .accordion-head {
opacity: 0.85;
transition:0.5s;


}
.accordion .accordion-body {
padding: 2px 20px;
height: auto;
display: block;
background: #EB5B31;
color:#ffffff;
text-align:center;
}
.accordion-body button {
margin: 0;
padding: 6px 10px;
background: #111;
border: 0;
border-radius: 6px;
}
.accordion-body button a {
background: #111;
color: #fff;
}
.accordion-body p {
margin: 6px;
}

Javascript (jQuery)

//Accordian
$('.accordion').each(function () {
var $accordian = $(this);
$accordian.find('.accordion-head').on('click', function () {
$accordian.find('.accordion-body').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$('h4',this).text("⬆").css("font-size","40px");
}else{
$('h4',this).text("⬇").css("font-size","40px");
}
});
});