JQuery Doesn't Work When Bootstrap CSS Library is Added

Question

Background:
I am trying to test a solution to the question here: How to make toggle hidden by default. The code uses jquery to toggle text (with "hidden" being the default).

Problem:
When I add <link rel="stylesheet" href="../../bootstrap-3.3.4-dist/css/bootstrap.min.css"> (a library I'm using for a couple of other webpages) , the jquery query commands no longer work. When I click the link to toggle text, nothing happens.

What I've tried:
I thought the problem had something to do with the way jquery is loading on the page. So I tried changing the position of the script tag to after the body (as well as in the head) to see if that would make a difference.

I looked at the question here (Jquery Datatables and Bootstrap Toggle Doesn't work Together), but the answer says to use jquery's on() method to bind events (at least I think that's what is being said). However, I don't think binding events is the problem because, in my case, the jquery doesn't work when the styling libraries are added (those should not affect the functionality of jquery right?).

Question:
Could someone please explain why/ how the CSS library stops jquery from working? Can you point me in the direction of some useful documentation? Also, is there a workaround for this issue? If anything, I would have thought the two different versions of the jQuery libraries would have caused the issue. I'm pretty new to jQuery, so any advice is appreciated.

Code:

<!DOCTYPE html>
<html>
<head>
    <style>
        .hidden {
            display:none;
        }

    </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../bootstrap-3.3.4-dist/jquery/1.11.1/jquery.min.js"></script>

    <link rel="stylesheet" href="../../bootstrap-3.3.4-dist/css/bootstrap.min.css">

    <script src="../../bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="../../fileLoader.js"></script>
    <script>
        function toggler(divId) {
            $("#" + divId).toggle();
        }
    </script>
</head>
<body>

    <a href="#" onclick="toggler('myContent');">this is a test</a>
    <div id="myContent" class='hidden'>
        <div>this is a test #1 </div>
    </div> 
    <br />
    <a href="#" onclick="javascript:toggler('myContentt');">
        <span>this is a text</span>
    </a>
    <div id="myContentt" class='hidden'>
        this is a test #2
    </div>
</body>
</html>

@A.Wolff Thanks for you help. I tried your two suggestions. I moved the jquery function above the other imports and ran the code watching for errors in Chrome Developer Tools > Console. No errors showed up in the console (and it still didn't work). — JustBlossom
– JustBlossom, Commented Jan 22, 2017 at 14:57
Seems like it would be easier to use collapse. That being said, toggle has a callback that can be used to verify whether it's actually being called or not. — Tieson T.
– Tieson T., Commented Jan 23, 2017 at 6:25

Gene Parcellano · Accepted Answer · 2017-01-23 05:57:20Z

1

The reason it stops working is because of Bootstrap's .hidden class overriding jQuery's .toggle() feature. This is happening because Bootstrap uses !important. This is how Bootstrap's CSS looks like:

.hidden {
    display: none!important;
}

Even though jQuery's .toggle() adds style="display:block" inline to the elements you want to display, these are being nullified by !important.

One way to get around this is to use jQuery's toggleClass() function, like so:

function toggler(divId) {
    $("#" + divId).toggleClass('hidden');
}

I hope this helps. Just leave me a comment if something is unclear.

answered Jan 23, 2017 at 5:57

Gene Parcellano

6,0545 gold badges40 silver badges45 bronze badges

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

2 Comments

JustBlossom Over a year ago

Great thanks! That worked. I just want to make sure I understand your explanation. jQuery toggle() switches an element between show() and hide() - the visibility attribute of the div. However, the hidden class in Bootstrap (which is permanently set) overrides the show()/hide() methods used by jQuery. This means that the element will always be hidden. So instead, I use toggle class to change what class is being applied to the div. And that overrides the Bootstrap CSS. Is that right? Sorry, I'm new to jQuery.

Gene Parcellano Over a year ago

@JustBlossom That's right. By using toggle on the class (hidden), that display: none !impotant; is no longer being applied. There are other ways to go about it, but this way works with your current setup.

Collectives™ on Stack Overflow

JQuery Doesn't Work When Bootstrap CSS Library is Added

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related