CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sheperd
Sheperd

Reputation: 33

Move read more link down with the text

The read more link does not go down with the text itself when the remaining text is shown.

I tried position: relative; on the "read more" link which is <a href="#">Read More</a> but no luck, because the <a href="#">Read More</a> is not a child of <div="main"> but it is a child of <div id="sidebox"> and it is in a separate javascript file too.

How can I make the "read more" link move down with the text?

The HTML File:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #mainwrapper #sidebox {top:100px;right:2%;width:18%;position:absolute;direction:rtl;}
            #mainwrapper #sidebox #main {top:80px;position:absolute;right:0%;left:0%;margin-left:auto;margin-right:auto;}
            #mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;}
            #mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;}
            #mainwrapper #sidebox a {text-decoration:none;color:grey;font-size:20px;position:relative;top:300px;}
        </style>
    </head>
    <body>
        <div id="mainwrapper">
            <div id="sidebox">
                <div id="main">
                    <p id="title">SOME TITLE</p>
                    <p id="sub">SOME LONG TEXT</p>
                </div>
            </div>
        </div>
    </body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="readmore.js"></script>
<script>$('#main').readmore({speed: 500});</script>

Part of the code in the readmore.js:

 var readmore = 'readmore',
  defaults = {
    speed: 100,
    collapsedHeight: 200,
    heightMargin: 16,
    moreLink: '<a href="#">Read More</a>',
    lessLink: '<a href="#">Close</a>',
    embedCSS: true,
    blockCSS: 'display: block; width: 100%;',
    startOpen: false,
    // callbacks
    blockProcessed: function() {},
    beforeToggle: function() {},
    afterToggle: function() {}
  },

Upvotes: 0

Views: 262

Answers (2)

Serjio
Serjio

Reputation: 219

It seems the positioning of #main causes some problems, change your css to this:

    #mainwrapper #sidebox {width:15%;direction:rtl;position:absolute;top:100px;right:2%;}
    #mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;}
    #mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;}
    a {text-decoration:none;color:navy;font-size:20px;}

Upvotes: 1

Pravin W
Pravin W

Reputation: 2521

This maybe due to you have not added CSS try below and check jsfiddle link as well

#main{
  max-height: 80px; /*change as per your context*/
  overflow: hidden;
}

jsfiddle

Upvotes: 0

Related Questions