Javascript slide left to right

Question

I want to:

1. A roll-out animation from the header's abbreviation into the written out meaning + subheading with information about that main header.

Edit: Example: S3 rolling out into "Solidify solid states" and have the subheading gradually increase in transparency right after this occurs

2. Expanding it from left to right when it is clicked (thus revealing the underlying information that is hidden).

3. What I've done in jsfiddle seems to be very choppy. (It opens the secondary text in two segments).

<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
<div class = "s3notebox">
    <h1>S3</h1>
</div>
<div class = "sub-headings">
    <p>S3 notes go in this section which should flare out.</p>
</div>

CSS:

.s3notebox{
    background-color: rgba(174, 214, 241, 0.5);
    display: flex, inline-block;
    white-space: nowrap;
    height: 3em;
    width: 10vw;
    font-family: 'Poppins', sans-serif;
    border-left: 6px solid #48C9B0;
    border-radius: 2px;
}

.sub-headings{
    white-space: nowrap;
    height: 3em;
    width: 10vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-left: 6px solid yellow;
    position:absolute;
}

JS:

$(document).ready(function(){
    $(".s3notebox").click(function(){
      $(".sub-headings").slideToggle();
    });
  });

https://jsfiddle.net/snpb0gau/

Answer 1

I just written a solution. Here I've made some changes in your html, css & js file. Hope it will help you.

 $(document).ready(function(){ $(".s3notebox").click(function(){ $("#subHeading").toggleClass('left-to-right-slide'); }); });

 .s3notebox{ background-color: rgba(174, 214, 241, 0.5); display: flex, inline-block; white-space: nowrap; height: 3em; width: 10vw; font-family: 'Poppins', sans-serif; border-left: 6px solid #48C9B0; border-radius: 2px; } .sub-headings{ white-space: nowrap; height: 3em; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; border-left: 6px solid yellow; position: absolute; transition: all 0.33s ease; left: -100%; } .left-to-right-slide { left: 1%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class = "s3notebox"> <h1>S3</h1> </div> <div id="subHeading" class = "sub-headings"> <p>S3 notes go in this section which should flare out.</p> </div>