Is there a way to initially hide the div tag and then animate it in a slide toggle effect? I attempted using display:none on my '.accordion_box' followed by show() in slideToggle, but this results in adding the CSS property display: block. My goal is to create an accordion slide that expands from left to right.
$(".slide-toggle").click(function(){
$(".accordion_box").animate({
width: "toggle"
});
});#about .about_content .accordion_content {
font-size: 0;
min-height: 700px;
padding-top: 50px;
text-align: left;
}
#about .about_content .accordion_content .accordion_box, #about .about_content .accordion_content .accordion_toggle {
font-size: 16px;
display: inline-block;
vertical-align: top;
}
#about .about_content .accordion_content .accordion_box {
background: blue;
min-height: 200px;
width: 90%;
}
#about .about_content .accordion_content .accordion_toggle a.slide-toggle {
display: block;
width: 50px;
height: 200px;
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about">
<div class="wrapper">
<div class="about_content">
<h3>About Us</h3>
<div class="accordion_content">
<div class="accordion_box">
</div>
<div class="accordion_toggle"><a href="#about" class="slide-toggle"></a></div>
</div>
</div>
</div>
</div>