jquery toggleClass no result

Question

I have a menu which slide toggles in and out on click, but at the same time i'd like to have a grey background around the menu to fade toggle in and out. I don't want to do it with fadeToggle but with toggleClass, in order to be able to add more styles if necessary.

The toggleClass doesn't work at all, I can't figure out why. Thanks a lot for your help!!

$(document).ready(function(e) {
    $('#button').click(function() {
  $('#menu').slideToggle();
  $('#bgr').toggleClass('display');
 });
});

#menu {
    display:none;
    position: absolute; 
    top:40px; 
    right: 10%;
    z-index:10; 
    width: 30%; 
    height:400px;
    background: lightblue;}
#bgr {
    display:none;
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
#button {cursor: pointer;}
#button p 
{   position: absolute;
    top:0;
    right:10%;
    z-index:100;
    margin:0;
    color:lightblue;
    font-size:2em;
}
.display {
    display:block; 
    opacity:1;
}

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

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

sure, as long is it's more or less supported by most browsers... — Ollie, Aug 21 '15 at 12:56
The accepted answer fails miserably. I assume you are trying to cover over the rest of the page while showing the menu. If so, you will never be able to click anything on the page with his answer, since simply setting the opacity to 0 will not allow anything to be clicked below it. http://jsfiddle.net/cceg9Ldp/3/ — VIDesignz, Aug 21 '15 at 13:32

VIDesignz · Accepted Answer · 2015-08-21T13:41:17.397

2

The key is using visibility and opacity in tandem for a smooth animation and also being more specific in the display declaration using #bgr.display{} instead

http://jsfiddle.net/cceg9Ldp/4/

CSS

button {
    position:relative;
    z-index:2;
}

#bgr {
    opacity:0;
    visibility:hidden;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:all 1s;
    transition:all 1s;
}

 #bgr.display {
    opacity:1;
    visibility:visible;
}

HTML

<button>Click Me</button>
<div id="bgr"></div>

jQuery

$('button').click(function(){
    $('#bgr').toggleClass('display');
});

edited Aug 21 '15 at 13:41

answered Aug 21 '15 at 13:01

VIDesignz

4,703
3
25
37

i'm sorry i don't quite get it, where do i put this in? – Ollie Aug 21 '15 at 13:17
My bad, where you declared `.display`, use `#bgr.display`...updated my answer – VIDesignz Aug 21 '15 at 13:23
1

thanks for insisting, i wasn't thinking things through properly when i thought i had my solution. this works 100% and it's very straight-forward as well! genius, thanks 1000! – Ollie Aug 21 '15 at 15:37
Glad I could Help @Ollie :) – VIDesignz Aug 21 '15 at 16:24

score 1 · Answer 2 · answered Aug 21 '15 at 12:58

Try adding !important to your css

.display {
    display:block !important; 
    opacity:1 !important;
}

$(document).ready(function(e) {
  $('#button').click(function() {
    $('#menu').slideToggle();
    $('#bgr').toggleClass('display');
  });
});

    .display {
      display: block;
      opacity: 1;
    }
    #menu {
      display: none;
      position: absolute;
      top: 40px;
      right: 10%;
      z-index: 10;
      width: 30%;
      height: 400px;
      background: lightblue;
    }
    #bgr {
      display: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 100%;
      width: 100%;
      background: grey;
      -webkit-transition: opacity 1s;
      transition: opacity 1s;
    }
    #button {
      cursor: pointer;
    }
    #button p {
      position: absolute;
      top: 0;
      right: 10%;
      z-index: 100;
      margin: 0;
      color: lightblue;
      font-size: 2em;
    }
    .display {
      display: block !important;
      opacity: 1 !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="button">
  <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

score 1 · Answer 3 · edited May 23 '17 at 11:58

The problem is that the id selector #bgr is more specific than the class selector .display, so its styles "win" when the two conflict. toggleClass() is adding/removing the class, but it doesn't matter since the display: none from #bgr overrides display: block from .display.

Although !important is rarely a great idea, it does solve the problem here, allowing the class styles to override the id styles:

.display {
    display:block !important; 
    opacity:1 !important;
}

$(document).ready(function(e) {
    $('#button').click(function() {
  $('#menu').slideToggle();
  $('#bgr').toggleClass('display');
 });
});

#menu {
    display:none;
    position: absolute; 
    top:40px; 
    right: 10%;
    z-index:10; 
    width: 30%; 
    height:400px;
    background: lightblue;}
#bgr {
    display:none;
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
#button {cursor: pointer;}
#button p 
{   position: absolute;
    top:0;
    right:10%;
    z-index:100;
    margin:0;
    color:lightblue;
    font-size:2em;
}
.display {
    display:block !important; 
    opacity:1  !important;
}

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

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

is this a fade in animation? It will just hide and show the div right? — Raja Sekar, Aug 21 '15 at 13:02
thanks a lot Paul, this makes sense and it does work in terms of toggling the background, but the transition doesn't work. Do you know how I can get that to work? Plus you wrote that !important is rarely a great idea... why is that - and would it be better then to change to #bgr to .bgr? — Ollie, Aug 21 '15 at 13:11
@Raj: basically yes, but i would prefer to solve it with toggleClass instead of fadeToggle, because i might have to apply further styles to the div - not only fading. — Ollie, Aug 21 '15 at 13:12

score 0 · Answer 4 · answered Aug 21 '15 at 13:01

0

HTML: 
<div class="#bgr"></div>

css:
#bgr{
    opacity:0;
    background-color: grey;
    transition: all 0.2s linear;
}

.fadein{
    opacity: 1;
}

JS:
$('#bgr').toggleClass('fadein');

Try this. it will work!

answered Aug 21 '15 at 13:01

Raja Sekar

2,062
16
23

please add browser prefix, it will work from IE9+ and all browsers – Raja Sekar Aug 21 '15 at 13:01

score 0 · Answer 5 · answered Aug 21 '15 at 13:18

0

If you are using the "absolute" property then you can omit the "display:none" to achieve smooth transition effect. I have edited #bgr and .display for you. The toggle class works along with you get a smooth transition for your Dark BG.

The JS you have written will work with this example.

#bgr {
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
   
.display {
    opacity:1!important;
}

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

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

answered Aug 21 '15 at 13:18

K.Shrestha

567
3
8

beautiful, thanks a lot K.Shrestha, this works perfectly, finally!! – Ollie Aug 21 '15 at 13:22
I'm pretty sure this is going to fail, you can't click through an element that has opacity:0; – VIDesignz Aug 21 '15 at 13:28
Hi @VIDesignz you are correct, this code won't work. But applying this code with his previous codes will work. Thanks for your correction though. – K.Shrestha Aug 22 '15 at 13:43
I agree, not your fault man, the op did not exactly describe his intentions. It just made sense to me how it was going to be used so I tried to help him avoid future issues by raising the point I did. – VIDesignz Aug 22 '15 at 15:50

score 0 · Answer 6 · answered Aug 21 '15 at 13:32

I think you should just define a new style no-display

$(document).ready(function(e) {
    $('#button').click(function() {
  $('#menu').slideToggle();
  $('#bgr').toggleClass('display');
 });
});

#menu {
    display:none;
    position: absolute; 
    top:40px; 
    right: 10%;
    z-index:10; 
    width: 30%; 
    height:400px;
    background: lightblue;}
.no-display {
    display:none;
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
#button {cursor: pointer;}
#button p 
{   position: absolute;
    top:0;
    right:10%;
    z-index:100;
    margin:0;
    color:lightblue;
    font-size:2em;
}
.display {
    display:block; 
    opacity:1;
}

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

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr" class="no-display"></div>

jquery toggleClass no result

6 Answers6