Сделать отдельные кнопки переключателей работать вместе

Question

У меня есть некоторые информационные контейнеры, которые показывают некоторые сведения в начале, при нажатии на них они должны скрываться, и появляется информационная кнопка, чтобы они снова отображались при нажатии. На всей странице есть похожие информационные поля и кнопки. И я только хочу показать и скрыть тех, кто нажал, а не глобально всех.

Есть ли у кого-нибудь идея, как сделать эту функцию. Вот мой код.

<div class="it-con"> 
    <div class="mess-text"> 
     <span class="x-btn">&#10005;<br></span> 
     <h4>Headline</h4> 
     <br> 
     <p>Some Info</p> 
    </div> 
    <div class="toggle"> 
     <div class="inf-btn">Info</div> 
    </div> 
</div> 

Вот jquery, с которым я пришел.

$(".it-con .x-btn").click(function(e){ 
    $(this).closest('.mess-text').fadeOut(100);  
}) 

, но не знаю, как сделать inf-btn для отображения. И как снова появляется беспорядочный текст.

Справка действительно оценена.

:)

Answer 1

Вы можете просто сделать один кнопка, которая переключает видимость, как это:

<div class="it-con"> 
    <div class="mess-text"> 
     <span class="x-btn">&#10005;<br></span> 
    </div> 
    <div class="toggle"> 
     <h4>Headline</h4> 
     <br> 
     <p>Some Info</p> 
    </div> 
</div> 

JS:

$(".it-con .x-btn").click(function(e){ 
    info = $(this).parent().next('.toggle') 
    info.toggle(); 
    if (info.is(":visible")) { 
     $(this).html('HIDE'); 
    } else { 
     $(this).html('SHOW');  
    } 
}) 

Answer 2

Вы хотите что-то вроде THIS?

Код:

$(".inf-btn").click(function (e) { 
 
    $(this).siblings('.mess-text').slideToggle(); 
 
    $(this).text(function (i, text) { 
 
     return text === "Hide info" ? "Show info" : "Hide info"; 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="it-con"> 
 
    <button class="inf-btn">Hide info</button> 
 
    <div class="mess-text"> 
 
     <h4>Headline</h4> 
 

 
     <br> 
 
     <p>Some Info</p> 
 
    </div> 
 
</div> 
 
<div class="it-con"> 
 
    <button class="inf-btn">Hide info</button> 
 
    <div class="mess-text"> 
 
     <h4>Headline</h4> 
 

 
     <br> 
 
     <p>Some Other Info</p> 
 
    </div> 
 
</div>