javascript - Make seperate toggle buttons work together -
i have info containers show infos in beginning, when clicked on close should hiding , info button should show make them display again on click. throughout page there similar info fields , buttons. , wanna show , hide ones clicked on , not globaly of them.
has idea how make function. here's code.
<div class="it-con"> <div class="mess-text"> <span class="x-btn">✕<br></span> <h4>headline</h4> <br> <p>some info</p> </div> <div class="toggle"> <div class="inf-btn">info</div> </div> </div>
here's jquery came far.
$(".it-con .x-btn").click(function(e){ $(this).closest('.mess-text').fadeout(100); })
but don't know how make inf-btn display. nor how make mess-text reappear.
help appreciated.
: )
you want this?
the code:
$(".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>
Comments
Post a Comment