根据另一个div中的点击显示/隐藏div

Question

I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.

The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery

So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function . What am I missing?

<div id = "chatBubble"  class="talk-bubble tri-right btm-right round">
     <div class="talktext">
        <p>Hi, can I help?</p>
     </div>
</div>

<div id="wrapper" display = 'none'>
    <div id="menu">
        <p class="welcome">Welcome<b></b></p>
        <p class="logout"><a id="exit" href="#">Exit</a></p>
        <div style="clear:both"></div>
    </div>

   <div id="chatbox"></div>

   <form name="message" action="">
      <input name="usermsg" type="text" id="usermsg" size="63" />
      <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
  </form>
</div>

Relevant portion of javascript

$(document).ready(function() {
  $("#chatBubble").click(function(){
    //console.log("clicked")
    ('#wrapper').show();
  })
});

Please suggest.

Answer 1

You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.

Try the following:

 $(document).ready(function() { $("#chatBubble").click(function(){ //console.log("clicked") $('#wrapper').show(); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id = "chatBubble" class="talk-bubble tri-right btm-right round"> <div class="talktext"> <p>Hi, can I help?</p> </div> </div> <div id="wrapper" style='display:none'> <div id="menu"> <p class="welcome">Welcome<b></b></p> <p class="logout"><a id="exit" href="#">Exit</a></p> <div style="clear:both"></div> </div> <div id="chatbox"></div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" size="63" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div>