Ukrycie elementu klikając w button lub w body

Question

Witam. Jestem na początku nauki JS i jQuery. Pracując nad stroną internetową z udziałem jQuery napotkałam problem, którego od dłuższego czasu niestety nie mogę rozwiązać. Chciałabym uzyskać następujący efekt: Klikając w button pojawiłby się span z treścią. W celu jego ukrycia użytkownik miałby dwie możliwości do wyboru, kliknąć ponownie w owy button, bądź w body. Mój problem polega na tym, że udało mi się uzyskać jedynie częściowo w/w efekt. Sekcja pojawia się i znika z efektem "slideToggle" po kliknięciu w button, jednak klikając w body sekcja znika już bez efektu wspomnianej animacji "slideToggle". Jak w takim razie rozwiązać ten problem, aby w przypadku obu możliwości sekcja pojawiała się i znikała z efektem animacji? Bardzo proszę o na kierunkowanie mnie na właściwe tory ;) Z góry bardzo dziękuję.

<div class="main-section">
        <button class="btn">Click</button>
        <span class="text-section">Hello World!</span>
</div>

.btn {
    width: 100px;
    height: 30px;
    background-color: black;
    color: white;
    border: none;
    margin: 20px;
    cursor: pointer;
}

.text-section {
display: none;
}

$('.btn').click(function (e) {
        e.stopPropagation();
        $('.text-section').slideToggle();
});

$('.text-section').on("click", function (e) {
        e.stopPropagation();
});

$('body').on("click", function () {
    $('.text-section').hide();
});

 

Answer 1

$('body').on("click", function () {
    $('.text-section').hide();
});

Zmien hide() na slideToggle()

Comments

raczej 

$('.text-section').slideUp();

przy toogle klikając na body również pojawi się tekst a ma tylko się chować

---

Próbowałam już wcześniej użyć opcji slideUp, z tym że w moim przypadku po kliknięciu w body z pomocą tej opcji pojawia się i znika sekcja z tekstem, a chciałabym jedynie, aby po kliknięciu znikała. Być może winny jest zaistniałej sytuacji źle napisany kod pod ową funkcję? :)

---

No właśnie tak działa.

$('.btn').click(function (e) {
e.stopPropagation();
$('.text-section').slideToggle();
});

$('body').click(function () {
$('.text-section').slideUp();
});