Home/ Questions/Q 9213047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:39:36+00:00

I have a div with class post that has a bunch of text in

  • 0

I have a div with class “post” that has a bunch of text in it with no height specified.

.post {
    width: 100%;
    margin: 0 0 2% 0;
    background-color: #AAA;
    overflow: hidden;
}

With jQuery I want to initially add a second class “postLess” that specifies a height of 300px. And therefore hides part of the text.

.postLess {
    height: 300px;
}

When the “read more” button is clicked I would like to remove “postLess” and add “postMore” so that the height is set to “auto” and shows the full text.

.postMore {
    height: auto;
}

Then of course I want it to remove class “postMore” and add back class “postLess” when the button is clicked a second time. Here is my jQuery. What am I doing wrong?

    $('.post').addClass('postLess');
    $('.readMore').click(function() {
        if ($('.post').hasClass('postLess')) {
            $('.post').removeClass('postLess').addClass('postMore');
        }
        else if ($('.post').hasClass('postMore')) {
            $('.post').removeClass('postMore').addClass('postLess');
        }
    });

And here is the important part of my HTML down to the first two “.post”‘s

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Switchback</title>
        <link href="css/styles.css" type="text/css" rel="stylesheet">
        <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <header>
        </header>
        <div id="content">
            <div id="sidebar">
                <p>
                    Ut neque tellus, dapibus bibendum tempor quis, gravida vitae nisl.     Pellentesque erat elit, ullamcorper in accumsan id, ullamcorper in lectus. Nullam nec augue 
                </p>
                <p>
                    Nunc facilisis lacus vel enim fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae sem mauris. 
                </p>
            </div> <!-- end div id="sidebar" -->
            <div id="posts">
                <div class="post">
                    <div class="postImg" style="background-image: url('img/pic1.png');">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus lorem, viverra sed blandit non, vulputate in sem. Donec laoreet turpis id lectus 
                        <a href="javascript:;" class="readMore">read&nbsp;more&nbsp;&raquo;</a>
                    </p>
                </div>
                <div class="post">
                    <div class="postImg" style="background-image: url('img/pic2.png');">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec felis 
                    </p>
                    <p>
                        Sed ornare, velit ac dignissim lacinia, dui mauris suscipit enim, quis viverra metus elit id quam. Sed quis tellus nulla. Nam pulvinar ante at felis lobortis eleifend. 
                        <a href="#" class="readMore">read&nbsp;more&nbsp;&raquo;</a>
                    </p>
                </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the element starts out with one class, and you’d like to remove that class and add a different class and vice versa, just use toggleClass() to toggle both classes, and it should do the job for you :

    $('.readMore').on('click', function() {
    $('.post').toggleClass('postLess postMore');
});

    If there are more than one .post element, you’ll need to target them individually.

    If the .post element is a parent of the .readMore element, you can use closest() :

    $('.readMore').on('click', function() {
    $(this).closest('.post').toggleClass('postLess postMore');
});

    If it’s a child, you can use context : $('.post', this).toggleClass('postLess postMore');

    • 0