how to write if else within click function in javascript

Question

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>

Other than caching the $('.post') selector there is nothing wrong with your code. Does it not work? You could also simplify it a little by removing the if condition and using $('.post').toggleClass('postMore postLess'); — Rory McCrossan
– Rory McCrossan, Commented Jan 30, 2013 at 9:58
If you have more than one <div> with the class post, the .hasClass() function will return true if any of them have the postLess class. — Anthony Grist
– Anthony Grist, Commented Jan 30, 2013 at 10:01

adeneo · Accepted Answer · 2013-01-30 10:40:31Z

2

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');

edited Jan 30, 2013 at 10:40

answered Jan 30, 2013 at 9:59

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dominic Green · Accepted Answer · 2013-01-30 10:00:27Z

0

This is a more efficient way off doing it just toggle the class on an off no if statements required

$('.post').addClass('postLess');
    $('.readMore').click(function() {
           $('.post').toggleClass('postLess postMore');
            return false;      
    });

Also if your post more button is within the post div, you can do the following. This means you can have multiple instances of a post div running independently.

$('.post').addClass('postLess');
        $('.readMore').click(function() {
               $(this).parent().toggleClass('postLess postMore');
               return false;      
        });

answered Jan 30, 2013 at 10:00

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

Comments

clement g · Accepted Answer · 2013-01-30 10:00:47Z

0

You need to do it only fot the post you want to read, do don't use $('.post') but use $(this).parents('.post') instead.

So the complete solution would be :

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

Is it for a wordpress blog? I like this idea very much, I might try it on mine!

answered Jan 30, 2013 at 10:00

clement g

4511 gold badge3 silver badges10 bronze badges

2 Comments

adeneo Over a year ago

How do you know that .post is a parent of .readMore, and since parents() searches all the way to the document level, how do you know that there are'nt more .post elements as parents etc.

clement g Over a year ago

It is an assumption, you are right. AS I do use Wordpress a lot, I know you put a "Read more" only on a page where multiple posts are presents, and they are siblings. Others suggest to use .parent() but I am not sure the .post is the direct parent of the .readMore. Your solution will only work if there is only one .post in the page, which makes no sense to have a "Read More" on such a page...

Collectives™ on Stack Overflow

how to write if else within click function in javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related