How hide div if another div is open use javascript

Question

i have div like this 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 i click button id="btnmsg-1" then div class="msgid-1" show, and then i click button id="btnmsg-3" then div class="msgid-3" show but div class="msgid-1" not hide or close,my question how hide the div if another div is open?

Answer 1

Instead of using separate handlers for each, you can use the related positioning of the elements along with classes to group them to show/hide

ie, Add a class like btnmsg to all the buttons and msgedit to all the div's that have to be shown/hidden. Now register a click handler to .btnmsg elements, from your markup the .msgedit element to be shown is the next sibling of the clicked button so show that then hide all 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> 

Answer 2

Please add same classes to similar elements, and then use this jQuery code instead:

$(document).ready(function(){
    $(".btnmsg").click(function(){
        $(".msgid").hide();
        $(this).parent().next(".msgid").show();
    });
});

See the complete DEMO working: https://jsfiddle.net/lmgonzalves/n5f78kqs/

Answer 3

jsBin demo

• don't use msgid-1 , msgid-2 etc... cause it defeats the purpose of classNames. Use only msg
• Same goes for your buttons. Remove the buttons IDs. use Class class="btn"
• Don't use inline styles. Use <style> instead or call-to an external stylesheet.

HTML

<div class="btn">
  NAME : ABCDEF <button>message</button>
</div>
<div class="msg">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send">
</div>

CSS:

.msg{
  display:none;
}

See how more readable is now your code?
jQuery:

var $msg = $(".msg");                                       // Get all .msg DIVs
$(".btn").on("click", "button", function( e ){
    $msg.hide();                                            // Hide all
    $(e.delegateTarget).next().show();                      // Show next
});

Answer 4

You can do this by calling hide() on the elements you would like to hide.

For example, you would make the following change:

// Old
$("#btnmsg-1").click(function(){
    $(".msgid-1").show();
});

//New
$("#btnmsg-1").click(function(){
    $(".msgid-1").show();
    $(".msgid-2").hide();
    $(".msgid-3").hide();
    $(".msgid-4").hide();
});

A cleaner way to do this would be to give all of your messages a "message" class, then your onClick handlers would look like this:

$("#btnmsg-1").click(function(){
    $("#message").hide();
    $(".msgid-1").show();
});

Hope that helps!