CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vishnu
vishnu

Reputation: 2948

Toggle class on click body

I know lot of questions something like this are also in Stackoverflow. Here is a bit of Jquery problem. I have added toggle class Jquery function, and the same class should be remove when click anywhere on the body. Its working now, but I no need toggle that class when we click inside of the input text field.

Code:

var removeClass = true;
$(".btn-search").click(function() {
  $(".input-search").toggleClass('expanded');
  removeClass = false;
});
$("html").click(function() {
  if (removeClass) {
    $(".input-search").removeClass('expanded');
  }
  removeClass = true;
});
body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

JS Fiddle: https://jsfiddle.net/vishnuprasadps/3a84p6h0/

Upvotes: 2

Views: 6038

Answers (6)

Vigna Bagdai
Vigna Bagdai

Reputation: 19

$(function() {
  $(".navbar-toggler").on("click", function(e) {
    $("body").toggleClass("openMenu");
    e.stopPropagation()
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button
  class="navbar-toggler"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#navbarSupportedContent"
  aria-controls="navbarSupportedContent"
  aria-expanded="false" 
  aria-label="Toggle navigation"
>
  <div class="bar1"></div>
  <div class="bar3"></div>
</button>

Upvotes: 0

SHIV
SHIV

Reputation: 21

sweet and simple

$(".btn-search").click(function(event) {
	event.stopPropagation();
  $(".input-search").toggleClass('expanded');
});
$("html").click(function() { 
    $(".input-search").removeClass('expanded'); 
});
$(".input-search").click(function(event) {
	event.stopPropagation();
  $(".input-search").addClass('expanded');
 
});
body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
  z-index: 10;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

Upvotes: -1

Shyam
Shyam

Reputation: 1454

Please check the following code:

HTML:

<input class="input-search" type="search" placeholder="Search" id="inputSearch" />

JS:

$("#inputSearch").click(function(e) {
    e.stopPropagation();
});


var removeClass = true;
$(".btn-search").click(function() {
  $(".input-search").toggleClass('expanded');
  removeClass = false;
});
$("html").click(function() {
  if (removeClass) {
    $(".input-search").removeClass('expanded');
  }
  removeClass = true;
});
$("#inputSearch").click(function(e) {
    e.stopPropagation();
});
body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" id="inputSearch" />
  <input type="button" class="btn-search" value="click">
</div>

Is this what you expect?

Upvotes: 1

Nope
Nope

Reputation: 22329

Make sure to check the event wasn't triggered by the input you want to exclude using event.target

This also doesn't interfere with other events that might be bound to the input itself.

var removeClass = true;
$(".btn-search").click(function() {
  $(".input-search").toggleClass('expanded');
  removeClass = false;
});
$("html").click(function() {
  var searchInput = $(".input-search");
  if (removeClass && event.target != searchInput[0]) {
    searchInput.removeClass('expanded');
  }
  removeClass = true;
});
body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

Upvotes: 3

Zorak
Zorak

Reputation: 709

Just alter your JS with event on the input with return value https://jsfiddle.net/fcdo7kyh/

    var removeClass = true;
$(".btn-search").click(function() {
  $(".input-search").toggleClass('expanded');
  removeClass = false;
});
$(".input-search").click(function() {
  return false;
});

$("html").click(function() {
  if (removeClass) {
    $(".input-search").removeClass('expanded');
  }
  removeClass = true;
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

To fix this you can check which element raised the click event that bubbled up the DOM. If it was not within the .col-search then you can toggle the class.

Also note that this logic makes your removeClass variable redundant. 

$(".btn-search").click(function(e) {
  e.stopPropagation();
  $(".input-search").toggleClass('expanded');
});

$("html").click(function(e) {
  if ($(e.target).closest('.col-search').length == 0)
    $(".input-search").removeClass('expanded');
});
body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

Upvotes: 8

Related Questions