Установите элементы в исходное состояние после манипуляций

Question

Итак, после того, как вы нажмете ссылку «Показать описание» Here Он выдает описание. Но когда вы нажимаете «Скрыть описание», он должен вернуться к исходному состоянию, которое он не делает сейчас.

Мой Jquery:

$(document).ready(function(){ 
$('.show_hide').click(function(){ 
    $(".show_hide").text("Hide Description"); 
    $(this).prev().prev().prev('.slidingDiv').slideToggle(); 
    $(this).prev().prev('.desc_preview').fadeOut(); 
    $("#fade_layer").fadeOut(); 
    return false 
}); 
}); 

Есть ли способ сделать это? спасибо заранее

Answer 1

Попробуйте что-то вроде этого:

$('.show-hide').click(function() { 
 
    $(this).siblings('.description').slideToggle(); 
 
    $(this).fadeOut(function() { 
 
    ($(this).html() == 'Show description') ? $(this).html('Hide description'): $(this).html('Show description'); 
 
    }); 
 
    $(this).fadeIn(); 
 
});

.group { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    margin: 5px; 
 
} 
 
.description { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="group"> 
 
    <div class="description"> 
 
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing! 
 
    </div> 
 
    <button class="show-hide">Show description</button> 
 
</div> 
 
<div class="group"> 
 
    <div class="description"> 
 
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing! 
 
    </div> 
 
    <button class="show-hide">Show description</button> 
 
</div> 
 
<div class="group"> 
 
    <div class="description"> 
 
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing! 
 
    </div> 
 
    <button class="show-hide">Show description</button> 
 
</div> 
 
<div class="group"> 
 
    <div class="description"> 
 
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing! 
 
    </div> 
 
    <button class="show-hide">Show description</button> 
 
</div> 
 
<div class="group"> 
 
    <div class="description"> 
 
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing! 
 
    </div> 
 
    <button class="show-hide">Show description</button> 
 
</div>