I have been looking a js/jquery solution on the net and stackoverflow for a div that has a set height (example 20px;) and after the user clicks [read more] it opens to a height of auto or 150px; (full content)

Example:

<style>
.small  {height: 20px;}
.big    {height: auto;}
</style>


<div class="small">
    <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea modo consequat. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo
    consequat.</p>
    <a href="#">Click to read more</a>
</div>

Thanks for the help.

EDIT: Ive tried this:

In the href: onclick="javascript:toggleContent(this, true);"

Along with this:

<script type='text/javascript'>
$(window).load(function(){
ment_reply = function (id){

   var e = $(id);
   e.toggle();
}
}); 
</script>

The problem with that is the div expands on click rather than an [a href] I hope thats clear.

I have been looking a js/jquery solution on the net and stackoverflow for a div that has a set height (example 20px;) and after the user clicks [read more] it opens to a height of auto or 150px; (full content)

Example:

<style>
.small  {height: 20px;}
.big    {height: auto;}
</style>


<div class="small">
    <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea modo consequat. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo
    consequat.</p>
    <a href="#">Click to read more</a>
</div>

Thanks for the help.

EDIT: Ive tried this:

In the href: onclick="javascript:toggleContent(this, true);"

Along with this:

<script type='text/javascript'>
$(window).load(function(){
ment_reply = function (id){

   var e = $(id);
   e.toggle();
}
}); 
</script>

The problem with that is the div expands on click rather than an [a href] I hope thats clear.

• javascript
• jquery
• html
• css
• expand

• Sorry but where are you stuck??? – A. Wolff Commented Nov 22, 2013 at 11:32
• Can you tell us what have you trid till now? – Chirag Vidani Commented Nov 22, 2013 at 11:34
• Ah, sorry, I should have clarified. I don't know how to do it. Im not a JS. The only option Ive found to work was click on the div and it expands. But having hyperlinks in my content opens or closes the div and then goes to the url. Not a clean option. – James Commented Nov 22, 2013 at 11:35
• Ive tried this:<script type='text/javascript'> $(window).load(function(){ ment_reply = function (id){ var e = $(id); e.toggle(); } }); </script> with this: onclick="javascript:toggleContent(this, true);" – James Commented Nov 22, 2013 at 11:35
• each answer bellow are using jQuery... if you haven't add it yet to your project, you have to : <script src="http://code.jquery./jquery-git.js" type="text/javascript"></script> – Oliboy50 Commented Nov 22, 2013 at 11:44

4 Answers 4

Just to expand DIV, you can use following code:

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    $(this).closest('.wrapper').find('.small').toggleClass('small big');
});

Where wrapper is used to let link being displayed

DEMO

UPDATED code

To make it collapse too:

DEMO

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

Something like that... could be optimised...

$(document).ready(function(){
    $(document).on('click', '.small a', function(){
        $('.small').addClass('big');
        $('.small').removeClass('small');
    });
    $(document).on('click', '.big a', function(){
        $('.big').addClass('small');
        $('.big').removeClass('big');
    });
});

Try this

CSS

.text.short {
    height: 50px;
    overflow: hidden;
}
.text.full {

}
.read-more {
    cursor: pointer;
    display: inline-block;    
    font-weight: bold;
    padding: 3px;
    background-color: #06c;
    color: white;
    margin: 2px;
}

Script

$(document).ready(function(){    
    $(".read-more").click(function(){        
        var $elem = $(this).parent().find(".text");
        if($elem.hasClass("short"))
        {
            $elem.removeClass("short").addClass("full");        
        }
        else
        {
            $elem.removeClass("full").addClass("short");        
        }       
    });
});

DEMO

Try this JSFiddle: http://jsfiddle/RPBBg/

What you need is a toggler div

<div id="toggle" onclick="$('.small').css('height','auto');">Click to read more</div>