Simple AddClass and RemoveClass with Button, jQuery Script

Question

Below is a script, which does not work well. When clicking the close button, removeclass does not work properly. when click close div / class does not remove. I'm looking for his mistake, but I'm confused.

Maybe it can be corrected? I am very grateful. And thank you so much.

 $( document ).ready(function() {
	$(".tombol_bawah").click(function(){
		$(".top-btn").addClass('tombol_atas_show');
		$(".chat_partty_side").addClass('tampilkan_list_chat');
		$(this).addClass('tombol_bawah-hide')
	});

	$(".top-btn").click(function(){
		$(".tombol_bawah").removeClass('tombol_bawah-hide');
		$(".chat_partty_side").removeClass('tampilkan_list_chat');
	});
})

.chat_partty_side {
     overflow: hidden;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tampilkan_list_chat {
    background: red;
    height: 95%;
    display: block;
    width: 219px;
    bottom: 0;
    right: 0;
    position: fixed;
    border-radius: 0;
    padding-bottom: 30px;
 }
 
 .top-btn {
    top: 15px;
    right: 15px;
    color: #98D1EC;
	padding:9px;
    text-align: center;
    width: 43px;
    height: 43px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
     transition: all 1s;
     opacity: 0;
 }
 
 .top-btn:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     background: #7EC6E7;
     color: #fff
 }
 
 .tombol_atas{

     font-size: 20px;
     color: red;
     background: #FFF;
 }
 
  .tombol_bawah {
     position: fixed;
	 cursor:pointer;
     bottom: 33px;
     right: 30px;
     color: #FFF;
     background:blue;
     padding: 21px;
     text-align: center;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     opacity: 1;
 }
 
 
 
 .tombol_bawah:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #fff
 }
 
 .tombol_atas_show {
     opacity: 1 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tombol_bawah-hide {
     opacity: 0 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="chat_partty_side">
  <div class="tombol_atas">
    <div class="top-btn">X Close</div>
  </div>
  <p>List Chat 1</p>
  <p>List Chat 2</p>
  <p>List Chat 3</p>
  <p>List Chat 4</p>
</div>
<div class="tombol_bawah">Open</i></div>

Baezid Mostafa · Accepted Answer · 2018-04-02 22:08:28Z

You need to remove the class "tombol_atas_show" on top button click function event.

 $( document ).ready(function() {
	$(".tombol_bawah").click(function(){
		$(".top-btn").addClass('tombol_atas_show');
		$(".chat_partty_side").addClass('tampilkan_list_chat');
		$(this).addClass('tombol_bawah-hide')
	});

	$(".top-btn").click(function(){
		$(".tombol_bawah").removeClass('tombol_bawah-hide');
		$(".chat_partty_side").removeClass('tampilkan_list_chat');
                $(this).removeClass("tombol_atas_show");
	});
})

.chat_partty_side {
     overflow: hidden;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tampilkan_list_chat {
    background: red;
    height: 95%;
    display: block;
    width: 219px;
    bottom: 0;
    right: 0;
    position: fixed;
    border-radius: 0;
    padding-bottom: 30px;
 }
 
 .top-btn {
    top: 15px;
    right: 15px;
    color: #98D1EC;
	padding:9px;
    text-align: center;
    width: 43px;
    height: 43px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
     transition: all 1s;
     opacity: 0;
 }
 
 .top-btn:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     background: #7EC6E7;
     color: #fff
 }
 
 .tombol_atas{

     font-size: 20px;
     color: red;
     background: #FFF;
 }
 
  .tombol_bawah {
     position: fixed;
	 cursor:pointer;
     bottom: 33px;
     right: 30px;
     color: #FFF;
     background:blue;
     padding: 21px;
     text-align: center;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     opacity: 1;
 }
 
 
 
 .tombol_bawah:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #fff
 }
 
 .tombol_atas_show {
     opacity: 1 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tombol_bawah-hide {
     opacity: 0 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="chat_partty_side">
  <div class="tombol_atas">
    <div class="top-btn">X Close</div>
  </div>
  <p>List Chat 1</p>
  <p>List Chat 2</p>
  <p>List Chat 3</p>
  <p>List Chat 4</p>
</div>
<div class="tombol_bawah">Open</i></div>

Arrararr · Accepted Answer · 2018-04-03 06:50:13Z

0

If you need to hide close btn, you need to add $(".top-btn").removeClass("tombol_atas_show"); after $(".top-btn").click(function(){

UPD:

 $( document ).ready(function() {
	$(".tombol_bawah").click(function(){
		$(".top-btn").addClass('tombol_atas_show');
		$(".chat_partty_side").addClass("tampilkan_list_chat");
		$(this).addClass("tombol_bawah-hide");
    $(".chats-list").removeClass("chats-list-hide");
	});

	$(".top-btn").click(function(){
    if (!$(".tombol_bawah").hasClass("tombol_bawah-hide")) {
        $(".chats-list").addClass("chats-list-hide");
        $(this).removeClass("tombol_atas_show");
    }
    
		$(".tombol_bawah").removeClass("tombol_bawah-hide");
		$(".chat_partty_side").removeClass("tampilkan_list_chat");
	});
})

.chat_partty_side {
     overflow: hidden;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tampilkan_list_chat {
    background: red;
    height: 95%;
    display: block;
    width: 219px;
    bottom: 0;
    right: 0;
    position: fixed;
    border-radius: 0;
    padding-bottom: 30px;
 }
 
 .top-btn {
    top: 15px;
    right: 15px;
    color: #98D1EC;
	padding:9px;
    text-align: center;
    width: 43px;
    height: 43px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
     transition: all 1s;
     opacity: 0;
 }
 
 .top-btn:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     background: #7EC6E7;
     color: #fff
 }
 
 .tombol_atas{
     font-size: 20px;
     color: red;
     background: #FFF;
 }

.chats-list-hide {
  display: none;
}
 
  .tombol_bawah {
     position: fixed;
	 cursor:pointer;
     bottom: 33px;
     right: 30px;
     color: #FFF;
     background:blue;
     padding: 21px;
     text-align: center;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     opacity: 1;
 }
 
 
 
 .tombol_bawah:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #fff
 }
 
 .tombol_atas_show {
     opacity: 1 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tombol_bawah-hide {
     opacity: 0 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="chat_partty_side">
  <div class="tombol_atas">
    <div class="top-btn">X Close</div>
  </div>
  <div class="chats-list">
    <p>List Chat 1</p>
    <p>List Chat 2</p>
    <p>List Chat 3</p>
    <p>List Chat 4</p>
  </div>
  
</div>
<div class="tombol_bawah">Open</i></div>

edited Apr 3, 2018 at 6:50

answered Apr 2, 2018 at 22:27

Arrararr

3642 silver badges12 bronze badges

4 Comments

Abdullah Over a year ago

thank you so much for answer and sugest, I want to remove "chat_partty_side" list chat, I want to remove it if click close button

Arrararr Over a year ago

Do you want to remove chats list from the left side?

Abdullah Over a year ago

yes , remove if click close button, and, open if click open button.

Arrararr Over a year ago

I've just updated my answer. Closing of left side was added

Collectives™ on Stack Overflow

Simple AddClass and RemoveClass with Button, jQuery Script

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related