CODEWITHSUNDEEP
javascriptjqueryhtml
Zakir Hossain
Zakir Hossain

Reputation: 59

Selecting a parent when a click event is fired?

I'm trying to select parent element when a click event is fired. I'm trying the following. I have 5 sidebar box with the same class and different content like below.

At first, the sidebar box shows some content and when we click the read more button it shows the rest content of the parent element. After that, the read more button is hiding in the parent box and the close button is showing, But it's showing all other boxes, not the parent box.

So, How can I select my only the parent close button? Please check my javascript code below.

<div class="artist_bio sidebar-box">

    <!-- Default Show this text -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, exercitationem.</p>

    <!-- After Clcik on .read-more-button it's showes -->
    <p>Lorem ipsum dolor sit amet.</p>

    <p class="read-more"><a href="#" class="button moretag read-more-button">Read More</a></p>
    <p class="read-less"><a href="#" class="button read-less-button">Close</a></p>
</div>

JavaScript is Here-

$(function() {

            var $el, $ps, $up, totalHeight;
            var $orgHeight = $('.sidebar-box').height();

            $(".sidebar-box .read-more-button").click(function() {

                totalHeight = 0

                $el = $(this); $p  = $el.parent(); $up = $p.parent();
                $ps = $up.find("p:not('.read-more')");

                $ps.each(function() {
                    totalHeight += $(this).outerHeight();
                    // FAIL totalHeight += $(this).css("margin-bottom");
                });

                $up
                    .css({
                        "height": $up.height(),
                        "max-height": 9999,
                        "opacity": 1,
                    })

                   .animate({
                        "height": totalHeight
                    },500,function(){

                    //Callback - after the animation is over
                    jQuery('#masonry-content').masonry(); });

                // fade out read-more
                $p.fadeOut();
                $('.read-less-button').fadeIn(50);

                // prevent jump-down
                return false;

            });

  /*Another Code*/
            $(".sidebar-box .read-less-button").click(function() {

                $el = $(this);
                $p  = $el.parent();
                $up = $p.parent();
                totalHeight = $up.height();

                $up
                    .css({

                        "height": totalHeight,
                        "max-height": 9999
                    })

                   .animate({
                        "height": $orgHeight
                    },500,function(){

                    //Callback - after the animation is over
                    jQuery('#masonry-content').masonry(); });

                // fade out read-less
                $p.fadeOut();
                $('.read-more').fadeIn();


                // prevent jump-down
                return false;

            });

        });

Upvotes: 1

Views: 167

Answers (2)

Huangism
Huangism

Reputation: 16448

To find a parent that could be levels up use .closest()

.closest("parent_selector") then .find(close_button). In your case it would be 

$el.closest(".sidebar-box").find('.read-less')

Here is the documentation on closest https://api.jquery.com/closest/

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Upvotes: 1

adprocas
adprocas

Reputation: 1913

This is a bit ugly, but if you refactor it you should be able to get it to work well.

I commented out your masonry methods, because those weren't included.

I think this should get you started. It appears it is because you were adding strings together, not numbers.

$(function() {

            var $el, $ps, $up, totalHeight;
            var $orgHeight = $('.sidebar-box').height();

            $(".sidebar-box .read-more-button").click(function() {

                totalHeight = 0

                $el = $(this); $p  = $el.parent(); $up = $p.parent();
                $ps = $up.find("p:not('.read-more')");

                $ps.each(function() {
                    totalHeight += parseInt($(this).outerHeight());
                    totalHeight += parseInt($(this).css("margin-bottom").replace('px',''));
                });

                $up
                    .css({
                        "height": $up.height(),
                        "max-height": 9999,
                        "opacity": 1,
                    })

                   .animate({
                        "height": totalHeight
                    },500,function(){

                    //Callback - after the animation is over
                    //jQuery('#masonry-content').masonry(); 
                    });

                // fade out read-more
                $p.fadeOut();
                $('.read-less-button').fadeIn(50);

                // prevent jump-down
                return false;

            });

  /*Another Code*/
            $(".sidebar-box .read-less-button").click(function() {

                $el = $(this);
                $p  = $el.parent();
                $up = $p.parent();
                totalHeight = $up.height();

                $up
                    .css({

                        "height": totalHeight,
                        "max-height": 9999
                    })

                   .animate({
                        "height": $orgHeight
                    },500,function(){

                    //Callback - after the animation is over
                    //jQuery('#masonry-content').masonry(); 
                    });

                // fade out read-less
                $p.fadeOut();
                $('.read-more').fadeIn();


                // prevent jump-down
                return false;

            });

        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="artist_bio sidebar-box">

    <!-- Default Show this text -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, exercitationem.</p>

    <!-- After Clcik on .read-more-button it's showes -->
    <p>Lorem ipsum dolor sit amet.</p>

    <p class="read-more"><a href="#" class="button moretag read-more-button">Read More</a></p>
    <p class="read-less"><a href="#" class="button read-less-button">Close</a></p>
</div>

Upvotes: 1

Related Questions