CODEWITHSUNDEEP
jquery
wetjosh
wetjosh

Reputation: 6398

how to write if else within click function in javascript

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>

Upvotes: 0

Views: 1681

Answers (3)

adeneo
adeneo

Reputation: 318182

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

Upvotes: 2

clement g
clement g

Reputation: 451

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!

Upvotes: 0

Dominic Green
Dominic Green

Reputation: 10260

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

Upvotes: 0

Related Questions