JSFiddle - React, Tailwind, and code Playground

by Tokyo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li><a class="first" href="#f">Home1</a></li>
<li><a class="second" href="#second">Home2</a></li>
  <li><a class="third" href="#third">Home3</a></li>
 </ul>
</nav>


<section id="first" class="story" data-speed="4" data-type="background"  >    	
<div id="wrapper">

<article>
      
<div class="comment more">
	<h2>Home1</h2>
Son had talks with at least one lender before scrapping the plan at least three months ago when he could not agree with the overseas partner on financing conditions, the people said, asking not to be identified because they are not authorized to discuss the matter.  <!-- break -->
  
While it was the top possible deal earlier this year, Son is no longer considering using that partner, the people said without elaborating.
Concerns about debt and struggling U.S. unit Sprint Corp. have driven SoftBank’s market value down to about $64 billion, or less than the stakes it holds in companies including Alibaba Group Holding Ltd. and Yahoo Japan Corp. A deal excluding Son’s 19.3 percent stake would be the biggest management buyout ever, according to data compiled by Bloomberg.
  
</div>
  
</article>
 </div>
</section>

<section id="second" class="story" data-speed="4" data-type="background"  >    	
<div id="wrapper">

<article>
      
<div class="comment more">
	<h2>Home2</h2>
Son had talks with at least one lender before scrapping the plan at least three months ago when he could not agree with the overseas partner on financing conditions, the people said, asking not to be identified because they are not authorized to discuss the matter.  <!-- break -->
  
While it was the top possible deal earlier this year, Son is no longer considering using that partner, the people said without elaborating.

</div>
  
</article>
 </div>
</section>

<section id="third" class="story" data-speed="4" data-type="background"  >    	
<div id="wrapper">

<article>
...

CSS

#first{
height:600px;
}
#first article {
	color: #000;
	background-color: rgba(14, 0, 0, 0.3);
	margin-bottom: 95px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-top: 20px;
}

nav#menu {
	position: fixed;
	z-index: 5;
	width: 100%;
	top:0%;
	text-align: center;
	height: 90px;
	box-shadow: 0 0 25px rgba(0,0,0,0.9);
	background-color: rgba(14, 0, 0, 0.8);
}


nav#menu a {
	text-decoration: none;
	text-indent: -9999px;
	 color: #fff;
}

nav#menu li {
	display:block;
	font-size: 1.2em;
	padding: 1em;
	font-weight: 900;
	font-family: 'Sorts Mill Goudy', serif;
	text-align: center;
	height: 3em;
	display:table-cell;
	vertical-align: middle;
	/*border: solid 1px #fff;*/
	}

nav#menu ul {
	display: inline-block;
	height: 85px;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');*/
}

JavaScript

$(document).ready(function() {
  var ellipsestext = "...",
    moretext = "More",
    lesstext = "Less",
    showChar;
  $('.more').each(function() {
    var content = $(this).html();
    
    showChar = content.search(/<!\-\-\s*break\s*\-\->/);
    if (content.length > showChar && showChar != -1) {


      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);

    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {

      $(this).removeClass("less");
      $(this).html(moretext);

    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
       // Example : Scroll the window at 450px from the top
      $("html, body").animate({ scrollTop: "100px" });
      

    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();

    return false;
  });
});