CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mostafa shenavaei
mostafa shenavaei

Reputation: 5

Change the style of CSS several times

I am making a chat and I have issue with the jQuery part.

<ul id="buttomIcon">
    <li id="span1"><span class="glyphicon glyphicon-send iconCom"></span></li>
</ul>

So I want that when I click on the icon it opens up the chat windows

<div class="container closeAll">
    <div class="row display chatBox drag ">
        <div class="col-md-2 col-md-offset-9 ">
            <div class="dragIt ">
                <button class="close closeChat" data-dismiss="drag"><span class="glyphicon glyphicon-remove closeChat"></span></button>
            </div>
            <iframe class=""></iframe>
            <textarea class="" id="chat"></textarea>
        </div>
    </div>
</div>

And when I click on the icon-remove it close the chat window.

But the issue is when I want to try again and open it, it does't work any more. and here is my jQuery:

$("#span1 span").click(function () {
    $(".chatBox").toggle();
});

$(".closeChat").click(function () {
    $(".closeAll").hide();
});

Upvotes: 0

Views: 58

Answers (3)

Arun Kumar M
Arun Kumar M

Reputation: 1601

In other solutions, if you hide .closeAll, you need to click twice on the .chatBox to reopen chatBox. for this below is the solution

Try as below:

$("#span1 span").click(function () {
     $(".chatBox").toggle();
});

$(".closeChat").click(function () {
     $(".chatBox").toggle();
});

Upvotes: 0

Jai
Jai

Reputation: 74738

Actually it's working, but with bugs i would say: 

$("#span1 span").click(function () {
    $(".chatBox").toggle();
});
$(".closeChat").click(function () {
    $(".closeAll").hide();
});

check above what you have done:

  1. You have a click event on $("#span1 span") and you are toggling $(".chatBox").
  2. You have another click event on $(".closeChat") and this is hiding the parent element $(".closeAll") which has $(".chatBox").

So use this: 

$(".chatBox").toggle();  
$(".closeAll").show();

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

try:

$("#span1 span").click(function () {
            $(".chatBox").toggle();
            $(".closeAll").show();
        });

Upvotes: 1

Related Questions