Read More

In this example below you will see how to do a Read More with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mikeclark, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mikeclark ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Read More</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Nunito|Raleway"rel="stylesheet"'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class='row'>
  <div class="top-header">
  </div>
  <div class="col-md-offset-1 col-md-11">
    <h1>Mike Clark</h1>
      <p>
      I used to be a professional web developer.  Not a designer, that's something that different.  A developer  is one that implements the design.</p>
    <p>Now that I'm retired.  I would like to get better at the design, mainly because I'm not part of a team, I'm flying solo.
    </p>
    <p><a class="readMore" href="#">Read More</a></p>
    <div class="moreText">
      <article class="article-shade col-md-offset-1 col-md-3">
        <img src="https://lh3.googleusercontent.com/proxy/baDObe-zbT3VnB7TwOT5dNwPwkV53aj9kJcWBAhfAN2WEuwk5FB1F8EESmDSlllDi8jPVsVhfo_MpQAUH1JwQIRLd2KSJrlkJe1BP4pEJICOW6Vg05evm4MoTEJl1wY5t0MmzBwL5xGdK-CVV4rItKuKZs3DT3BVZU9nlMVFQaQ=w265-h139-p-rw" ></img>
      Here is some text
      </article>
      <div class="col-md-12"><a class="readLess" href="#">Read Less</a></div>
    </div>
    
    </div>
  </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeclark/read-more-JLxqQp */
h1 {font-family: 'Nunito', sans-serif;font-weight:800}
p {font-family: 'Raleway', sans-serif;font-size:2rem}

a {
	color: #0091ae;
	font-weight: 500;
	text-decoration: none;
}
.readMore::after {
	margin-left: .6em;
	vertical-align: text-top;
	width: 15px;
	height: 15px;
	content: '';
	display: inline-block;
	background: url("https://cdn2.hubspot.net/hubfs/53/assets/hubspot.com/about/sprite.png") no-repeat -182px -181px;
}
.moreText, .readLess
{
  display:none;
}
.readLess::after {
	margin-left: .6em;
	vertical-align: text-top;
	width: 15px;
	height: 15px;
	content: '';
	display: inline-block;
	background: url("https://cdn2.hubspot.net/hubfs/53/assets/hubspot.com/about/sprite.png") no-repeat -182px -181px;
    transform: scaleY(-1);
}
.top-header
{
    background-image:url("https://images.pexels.com/photos/357891/pexels-photo-357891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    height:200px;
    background-position:-300px -600px;
    background-size:  auto;
}
.article-shade
{
   -webkit-box-shadow: 6px 6px 9px -4px rgba(158,150,158,1);
-moz-box-shadow: 6px 6px 9px -4px rgba(158,150,158,1);
box-shadow: 6px 6px 9px -4px rgba(158,150,158,1);
    z-index: 1;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 1px solid #c7c3c7;
  
    cursor: pointer;
    min-width: initial;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom:20px;
}
img {
    box-sizing: border-box;
    overflow: hidden;
    object-fit: fill;
    width: calc(100% + 30px);
    margin-left:-15px;
    margin-right:-15px;
    padding-left: 0;
    padding-right: 0;
    display: block;
    border: none;
    border-top-color: initial;
    border-top-style: none;
    border-top-width: initial;
    border-right-color: initial;
    border-right-style: none;
    border-right-width: initial;
    border-bottom-color: initial;
    border-bottom-style: none;
    border-bottom-width: initial;
    border-left-color: initial;
    border-left-style: none;
    border-left-width: initial;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

/*Downloaded from https://www.codeseek.co/mikeclark/read-more-JLxqQp */
$(document).ready(function(){
    $(".readMore").click(function(){
        $(".moreText").toggle();
        $(".readMore").toggle();
        $(".readLess").toggle();
    });
  $(".readLess").click(function(){
        $(".moreText").toggle();
        $(".readMore").toggle();
        $(".readLess").toggle();
    });
});

Comments