CODEWITHSUNDEEP
javascriptjqueryhtmlcss
omnibus
omnibus

Reputation: 11

jquery .toggleClass on click using multiple IDs

I'm trying to toggle the scrollbar of the <html> tag using jquery.

I want the scrollbar to disappear when i click on button #foo, and i want it to reappear when i click on #bar1.

$('#foo').click(function() {
  $('html').toggleClass("hidescroll");
});
$('#bar1').click(function() {
  $('html').toggleClass("hidescroll");
});
.hidescroll{
  overflow-y: hidden !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

it disappears when i click on #foo, but it doesnt reappear on #bar1, however it reappears when #foo is clicked again.

Upvotes: 0

Views: 75

Answers (3)

Thielicious
Thielicious

Reputation: 4452

Just an alternative

bar =v=> $('html').css('overflow',v)
$('#foo').click(()=> bar('hidden'))
$('#bar1').click(()=> bar('scroll'))

Upvotes: 0

Jean-Marc Zimmer
Jean-Marc Zimmer

Reputation: 555

$("#foo, #bar1")

is the selector you're looking for.

Snippet :

$('#foo, #bar1').click(function() {
  $('html').toggleClass("hidescroll");
});
.hidescroll {
  overflow:hidden;
}
#main {
  width:100%;
  height:2000px;
  float:left;
}
#foo {
  float:left;
  width:100px;
  height:50px;
  background-color:red;
  margin-right:15px;
}
#bar1 {
  float:left;
  width:100px;
  height:50px;
  background-color:blue;
}
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>

Upvotes: 2

ElusiveCoder
ElusiveCoder

Reputation: 1609

You can do it like this...use add and removeClass instead of toggleClass...

$('#foo').click(function() {
  $('html').addClass("hidescroll");
});

$('#bar1').click(function() {
  $('html').removeClass("hidescroll");
});
.hidescroll {
  overflow:hidden;
}
#main {
  width:100%;
  height:2000px;
  float:left;
}
#foo {
  float:left;
  width:100px;
  height:50px;
  background-color:red;
  margin-right:15px;
}
#bar1 {
  float:left;
  width:100px;
  height:50px;
  background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>

Upvotes: 2

Related Questions