jquery - How hide div if another div is open use javascript -


i have div use javascript :

<script> $(document).ready(function(){     $("#btnmsg-1").click(function(){         $(".msgid-1").show();     });     $("#btnmsg-2").click(function(){         $(".msgid-2").show();     });     $("#btnmsg-3").click(function(){         $(".msgid-3").show();     });     $("#btnmsg-4").click(function(){         $(".msgid-4").show();     }); }); </script>  <div>name : abcdef <button id="btnmsg-1">message</button></div>     <div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="send"></div> <div>name : ghijkl <button id="btnmsg-2">message</button></div>     <div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="send"></div> <div>name : mnopqr <button id="btnmsg-3">message</button></div>     <div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="send"></div> <div>name : stuvwx <button id="btnmsg-4">message</button></div>     <div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="send"></div> 

if click button id="btnmsg-1" div class="msgid-1" show, , click button id="btnmsg-3" div class="msgid-3" show div class="msgid-1" not hide or close,my question how hide div if div open?

instead of using separate handlers each, can use related positioning of elements along classes group them show/hide

ie, add class btnmsg buttons , msgedit div's have shown/hidden. register click handler .btnmsg elements, markup .msgedit element shown next sibling of clicked button show hide other .msgedit elements.

$(document).ready(function() {    var $edits = $('.msgedit')    $(".btnmsg").click(function() {      var $this = $(this).parent().next().show();      $edits.not($this).hide()    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div>name : abcdef    <button class="btnmsg" id="btnmsg-1">message</button>  </div>  <div class="msgid-1 msgedit" style="display:none;">    <textarea></textarea>    <input type="submit" name="btnsend" value="send" />  </div>  <div>name : ghijkl    <button class="btnmsg" id="btnmsg-2">message</button>  </div>  <div class="msgid-2 msgedit" style="display:none;">    <textarea></textarea>    <input type="submit" name="btnsend" value="send" />  </div>  <div>name : mnopqr    <button class="btnmsg" id="btnmsg-3">message</button>  </div>  <div class="msgid-3 msgedit" style="display:none;">    <textarea></textarea>    <input type="submit" name="btnsend" value="send" />  </div>  <div>name : stuvwx    <button class="btnmsg" id="btnmsg-4">message</button>  </div>  <div class="msgid-4 msgedit" style="display:none;">    <textarea></textarea>    <input type="submit" name="btnsend" value="send" />  </div>


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -