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">&#10005;<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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -