Toogle maximize width and height div using jquery

Question

Hello i want to maximize and minimize div using jquery. I use remove and add class method, when it maximize and minimize. But when it already maximized it wont to minimize.

Here id my jquery code :

$('.readmore').click(function (event) {
            event.preventDefault();
            $("#ry-new-content-3").animate({
                width : "+=460"
            },1000,function(){
                $('.more-content').slideDown('slow', function(){

                });
            });
            $(this).text($(this).text() == 'Read Less' ? 'Read More' : 'Read Less');

            if($(this).attr('class') == 'readmore') {
                $(this).removeClass();
                $(this).addClass('readless');
            }

         });

         $('.readless').click(function (event) {
            event.preventDefault();
            $('.more-content').slideUp('slow', function(){
                $("#ry-new-content-3").animate({
                    width : "-=460"
                },1000,function(){

                });
            });

         });

And it is my HTML code :

<div id="ry-new-content-3">
        <div class="scrollable-area-page">
            <div class="summary-content">
                <p>
                    The original Master piece was designed by the now famous JMP design group, a California based golf Design Company that has also designed the renowned Rainbow Hills Club & Royal Jakarta courses both located in Jakarta, along with over 70 international standard courses worldwide.
                    Overall Royal Sumatra could easily be rated as one of the most challenging and interesting layouts in all of Indonesia. To pinpoint a special feature of the Royal Sumatra layout is to mention many unique and eye pleasing holes that are spread out amongst the private Modern living cluster style housing estates and still natural forest land.
                </p>
            </div>
            <div class="more-content" style="display:none;">
                <p>
                    One of the concepts in the design was to spread the 18 holes out throughout the 254 hectare estate to not only allow privacy & safety for golfers but add more beautiful golf course views for home owners. Combined with the tropically landscape & buzzing wildlife in our environment including breath taking crystal clear morning views of famous Bukit Barisan & Brestagi Mountains, Royal Sumatra Golf and Country Club provides the strategic test & beautiful environment that every golfer wants and few golf clubs can offer.  
                    A variety of unique features await the avid golfer. Strategy is required at all times. Fairways are generous in size to accommodate the beginner, however undulating and strategically located white sand bunkers, creeks and large lakes add a stern test for the avid golfer to say the least Likely the most challenging feature of this championship layout are the multi tiered and  sloped putting greens which consistently run at fast speeds, to be fair these are arguably the most challenging greens in all of South East Asia. 
                </p>

                <p>
                    A fleet of new Club Car Buggies and 140+ uniformed female caddies complete the golfers every need and with prices all inclusive approximately USD $70 on weekends and USD $55 on weekdays ( Golf, Caddy, Buggy) Royal Sumatra is well worth it for the Golf traveler looking to truly test his golf game without damaging the bank balance. 
                </p>
            </div>
        </div>
        <div class="readmore">
            Read More
        </div>
    </div>

Thank you.

If you click two times on _Read*_, it is changed back to _Read More_ but div class stays _readless_. And after that stays _readless_ forever. — Anto Jurković, Nov 13 '13 at 10:57
And it seems that you have to fire event that your class was changed. See [jQuery - Fire event if CSS class changed](http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed) and similar Qs — Anto Jurković, Nov 13 '13 at 11:32

score 1 · Accepted Answer · answered Nov 13 '13 at 13:10

Have you given jQuerys Toggle a try? I've tried the same thing you are many times, the class swapping just is not worth it, as a personal opinion, so i've ended using the toggle or an if -statement. For example:

maximized = 500px
if($(".target").height() != maxmized){
   // maximize it
} else {
   // minimize it
}

Also, without knowing how it all looks or goes, you might want to take into consideration the animation times, if you are clicking too fast or slow, the action might not kick in, so using a callback would be good.

Toogle maximize width and height div using jquery

1 Answers1