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
Post a Comment