jquery .toggleClass on click using multiple IDs



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








0















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.










share|improve this question
























  • What is CSS for .hidescroll

    – Mohammad
    Nov 15 '18 at 10:32






  • 1





    can you make a js fiddle. according to your code it will work no issues

    – Negi Rox
    Nov 15 '18 at 10:33











  • It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of foo and bar1 in your html?

    – Morpheus
    Nov 15 '18 at 10:37












  • its working bro

    – Negi Rox
    Nov 15 '18 at 10:42











  • your example clearly works here

    – Nav Raj Bhattarai
    Nov 15 '18 at 10:44

















0















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.










share|improve this question
























  • What is CSS for .hidescroll

    – Mohammad
    Nov 15 '18 at 10:32






  • 1





    can you make a js fiddle. according to your code it will work no issues

    – Negi Rox
    Nov 15 '18 at 10:33











  • It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of foo and bar1 in your html?

    – Morpheus
    Nov 15 '18 at 10:37












  • its working bro

    – Negi Rox
    Nov 15 '18 at 10:42











  • your example clearly works here

    – Nav Raj Bhattarai
    Nov 15 '18 at 10:44













0












0








0


0






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.










share|improve this 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.






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





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






javascript jquery html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 10:38









Mohammad

16k123766




16k123766










asked Nov 15 '18 at 10:30









omnibusomnibus

64




64












  • What is CSS for .hidescroll

    – Mohammad
    Nov 15 '18 at 10:32






  • 1





    can you make a js fiddle. according to your code it will work no issues

    – Negi Rox
    Nov 15 '18 at 10:33











  • It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of foo and bar1 in your html?

    – Morpheus
    Nov 15 '18 at 10:37












  • its working bro

    – Negi Rox
    Nov 15 '18 at 10:42











  • your example clearly works here

    – Nav Raj Bhattarai
    Nov 15 '18 at 10:44

















  • What is CSS for .hidescroll

    – Mohammad
    Nov 15 '18 at 10:32






  • 1





    can you make a js fiddle. according to your code it will work no issues

    – Negi Rox
    Nov 15 '18 at 10:33











  • It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of foo and bar1 in your html?

    – Morpheus
    Nov 15 '18 at 10:37












  • its working bro

    – Negi Rox
    Nov 15 '18 at 10:42











  • your example clearly works here

    – Nav Raj Bhattarai
    Nov 15 '18 at 10:44
















What is CSS for .hidescroll

– Mohammad
Nov 15 '18 at 10:32





What is CSS for .hidescroll

– Mohammad
Nov 15 '18 at 10:32




1




1





can you make a js fiddle. according to your code it will work no issues

– Negi Rox
Nov 15 '18 at 10:33





can you make a js fiddle. according to your code it will work no issues

– Negi Rox
Nov 15 '18 at 10:33













It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of foo and bar1 in your html?

– Morpheus
Nov 15 '18 at 10:37






It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of foo and bar1 in your html?

– Morpheus
Nov 15 '18 at 10:37














its working bro

– Negi Rox
Nov 15 '18 at 10:42





its working bro

– Negi Rox
Nov 15 '18 at 10:42













your example clearly works here

– Nav Raj Bhattarai
Nov 15 '18 at 10:44





your example clearly works here

– Nav Raj Bhattarai
Nov 15 '18 at 10:44












3 Answers
3






active

oldest

votes


















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>








share|improve this answer























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

    – omnibus
    Nov 15 '18 at 10:42


















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>








share|improve this answer
































    0














    Just an alternative



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





    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function ()
      StackExchange.using("externalEditor", function ()
      StackExchange.using("snippets", function ()
      StackExchange.snippets.init();
      );
      );
      , "code-snippets");

      StackExchange.ready(function()
      var channelOptions =
      tags: "".split(" "),
      id: "1"
      ;
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function()
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled)
      StackExchange.using("snippets", function()
      createEditor();
      );

      else
      createEditor();

      );

      function createEditor()
      StackExchange.prepareEditor(
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader:
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      ,
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      );



      );













      draft saved

      draft discarded


















      StackExchange.ready(
      function ()
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317383%2fjquery-toggleclass-on-click-using-multiple-ids%23new-answer', 'question_page');

      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      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>








      share|improve this answer























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

        – omnibus
        Nov 15 '18 at 10:42















      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>








      share|improve this answer























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

        – omnibus
        Nov 15 '18 at 10:42













      2












      2








      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>








      share|improve this answer













      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>








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





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






      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Nov 15 '18 at 10:38









      ElusiveCoderElusiveCoder

      1,4121421




      1,4121421












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

        – omnibus
        Nov 15 '18 at 10:42

















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

        – omnibus
        Nov 15 '18 at 10:42
















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

      – omnibus
      Nov 15 '18 at 10:42





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

      – omnibus
      Nov 15 '18 at 10:42













      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>








      share|improve this answer





























        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>








        share|improve this answer



























          2












          2








          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>








          share|improve this answer















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








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





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






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 15 '18 at 10:49

























          answered Nov 15 '18 at 10:34









          Jean-Marc ZimmerJean-Marc Zimmer

          38415




          38415





















              0














              Just an alternative



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





              share|improve this answer



























                0














                Just an alternative



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





                share|improve this answer

























                  0












                  0








                  0







                  Just an alternative



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





                  share|improve this answer













                  Just an alternative



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






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 15 '18 at 15:19









                  ThieliciousThielicious

                  2,1331221




                  2,1331221



























                      draft saved

                      draft discarded
















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid


                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.

                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function ()
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317383%2fjquery-toggleclass-on-click-using-multiple-ids%23new-answer', 'question_page');

                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                      Darth Vader #20

                      Ondo