jquery .toggleClass on click using multiple IDs

Question

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.

can you make a js fiddle. according to your code it will work no issues — Negi Rox
– Negi Rox, Commented Nov 15, 2018 at 10:33
It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of foo and bar1 in your html? — Morpheus
– Morpheus, Commented Nov 15, 2018 at 10:37

ElusiveCoder · Accepted Answer · 2018-11-15 10:38:40Z

2

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>

answered Nov 15, 2018 at 10:38

ElusiveCoder

1,6091 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

omnibus Over a year ago

it worked using overflow: hidden instead of overflow-y: hidden. thank you.

Jean-Marc Zimmer · Accepted Answer · 2018-11-15 10:49:20Z

2

$("#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>

edited Nov 15, 2018 at 10:49

answered Nov 15, 2018 at 10:34

Jean-Marc Zimmer

5556 silver badges20 bronze badges

Comments

Thielicious · Accepted Answer · 2018-11-15 15:19:48Z

0

Just an alternative

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

answered Nov 15, 2018 at 15:19

Thielicious

4,4822 gold badges31 silver badges39 bronze badges

Collectives™ on Stack Overflow

jquery .toggleClass on click using multiple IDs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related