rodcunha rodcunha - 4 months ago 16
CSS Question

jQuery: fadeOut <div> element with with a close button

I am trying to build a dashboard UI where I want to be able to close some panels. I tried several ways to use the "this" keyword to avoid hard coding everything but couldn't figure it out. I'm sure there has to be a much more effective way to do what I did but I did achieve my goal.

Can anyone enlighten me on what I could do different?

HTML:

<div class="content-section col-sm-6 col-md-5" id="div1">
<div class="cs-header">
<p>Header<a href="#" class="btn-close right" id="close1"><i class="fa fa-close"></i></a></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
<div class="cs-header">
<p>Header<a href="#" class="btn-close right" id="close2"><i class="fa fa-close"></i></a></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
<div class="cs-header">
<p>Header<a href="#" class="btn-close right" id="close3"><i class="fa fa-close"></i></a></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p>
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
<div class="cs-header">
<p>Header<a href="#" class="btn-close right" id="close4"><i class="fa fa-close"></i></a></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
<div class="cs-header">
<p>Header<a href="#" class="btn-close right" id="close5"><i class="fa fa-close"></i></a></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>


jQuery:

$(document).ready(function() {
$('div').on('click', '#close1', function () {
$('#div1').fadeOut();
});

$('div').on('click', '#close2', function () {
$('#div2').fadeOut();
});

$('div').on('click', '#close3', function () {
$('#div3').fadeOut();
});

$('div').on('click', '#close4', function () {
$('#div4').fadeOut();
});

$('div').on('click', '#close5', function () {
$('#div5').fadeOut();
});
});

Answer

Below is an example where the user clicks on .btn-close and then fades out the closest section. It's much easier to bind an event to an class instead of several id's.

Since we're listening to an event we can use $(this) within the event listener. It will return the element that was clicked (in this example the anchor). When we got the clicked element we can use [.closest][1] to find the parent element based on class. And then we can use fadeOut().

$(document).ready(function() {
     // Listen to clicks on btn-close
        $('.content-section').on('click', '.btn-close', function () {
            // Get closest content-section and fade it out.
            // $(this) will be the anchor with the class btn-close.
            $(this).closest('.content-section').fadeOut();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-section col-sm-6 col-md-5" id="div1">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close1"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
                </div>
                <div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close2">X<i class="fa fa-close"></i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p> 
                </div>
                <div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close3"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p> 
                </div>
                <div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close4"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
                </div>
                <div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close5"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
                </div>