0

I need to change "S3" text inside the header to "Standing Solid State" at the same time that the width of the nav-box slides.

I'd like to have the "S3" fade out when the width expands and have the "Standing Solid State" fade in during that time.

http://jsfiddle.net/5mL0bvxu/

HTML:

<div class = "noteCard-box">
    <!-- S3 NOTECARD -->
    <div id="s3">
        <div class = "s3-header">
            <h1 id="s3-abbrev">S3</h1>
        </div>

        <div id = "s3-detail" class = "noteCard-details">
            <p> S3 Notes go in this section would animate</p>
        </div>

    </div>

</div>

CSS:

.noteCard-box{
    width: auto;
    height: auto;
    padding: 20px;
    border: 4px solid red;
}


.s3-header, .iam-header, .ebs-header{
    background-color: rgba(174, 214, 241, 0.5);
    display: flex, inline-flex;
    white-space: nowrap;
    height: 3em;
    width: 10%;
    font-family: 'Poppins', sans-serif;
    border-left: 6px solid #48C9B0;
    border-radius: 2px;
    cursor: pointer;
    padding: 0 5px;
    transition: all 0.6s ease-out;

}

.noteCard-details{
    white-space: nowrap;
    display: flex, inline-flex;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    transition: all 0.33s ease;
    overflow: hidden;
    padding: 0 5px;
    margin: 0 auto;
    border: 1px solid black;
    border-left: 6px solid yellow;
    border-radius: 2px;
    height: 300px;
    width: 35%;
}

.width-increase{
    width: 20%;
}

JAVASCRIPT:

$(document).ready(function(){
    $(".s3-header").click(function(){
      $(".s3-header").toggleClass('width-increase')
    })
  });


$(document)
    $(".s3-header").click(function(){
      $("#s3-abbrev").animate({opacity:0},function(){
          $(this).text("new text").animate({opacity:1});  
      })
  });
Liftoff
  • 24,717
  • 13
  • 66
  • 119
AVu
  • 125
  • 2
  • 12
  • Your jsFiddle was blank. FTFY. But also, what's the problem? What you described seems to be happening in the jsFiddle. – Liftoff Jul 18 '19 at 21:09
  • Take a look at [this post](https://stackoverflow.com/questions/596608/slide-right-to-left) You don't want to animate the opacity, you want to animate the width. – Adam H Jul 18 '19 at 22:04
  • @David Thanks for fixing that. I need it to transition to "Standing Solid State" when the tab is expanded and back to "S3" when it is collapsed. – AVu Jul 19 '19 at 14:17
  • @AdamH I need the text ("S3") to transition into "Standing Solid State". How can I achieve that by using slide? – AVu Jul 19 '19 at 14:19
  • Use 2 spans. One set to 0px width with the full text and one set to auto with the abbreviate. When they click immediately id the abbreviation and slide open the full text. – Adam H Jul 19 '19 at 15:19
  • @AdamH sorry, I'm not sure where I would add that. I'm still very new to JS – AVu Jul 20 '19 at 01:08

0 Answers0