Bootstrap isn't working with jQuery

Question

jQuery is working fine without linking bootstrap, but if i add bootstrap it goes all wrong basically i'm trying to build simple FAQ. If somebody can help me? here is the html file.

<html>
<head>
    <meta charset=utf-8>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css"> //works fine without this
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="jquery-2.2.3.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <dl>    
        <dt>title</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer     quis porttitor erat.</dd>
        <dt>title</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat.</dd>
    </dl>
</body>
</html>

jQuery/script:

(function() {
    var dd =  $('dd');
    dd.filter(':nth-child(n+2)').addClass('hide');
    $('dl').on('click', 'dt', function() {
        $(this)
            .next()
            .slideDown(200)
            .siblings('dd')
            .slideUp(200);
    });
})();

css goes this way

body {
    width: auto;
    margin: 20px;
}

dd {
    margin: 0;
    padding: 1em 0;
}

dt {
    cursor: pointer;
    font-weight: bold;
    font-size : 1.5em;
    line-height: 2em;
    background: #e3e3e3;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid white;
}

dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }

.hide { display: none;}

it's very hard to understand what's going wrong as the question stands. @kshah27 use a service like plunkr, jsfiddle, or jsbin to create a working example of your code — glcheetham, May 10 '16 at 12:56

Luthando Ntsekwa · Accepted Answer · 2016-05-10T13:13:05.110

it is because bootstrap already have hide class which is set to display:none !important;, try using a different class name. See below!

(e.g. I changed your class to hides in two places)

(function(){
var dd =  $('dd') ;

dd.filter(':nth-child(n+2)').addClass('hides');  /** i changed it here **/

$('dl').on('click', 'dt', function(){ 
     $(this).
        next()
            .slideDown(200)
            .siblings('dd')
               .slideUp(200);
});

})();

body {
width: auto;
margin: 20px;
}

dd {
margin: 0;

padding: 1em 0;
}

dt {
cursor: pointer;
font-weight: bold;
font-size : 1.5em;
line-height: 2em;
background: #e3e3e3;
border-bottom: 1px solid #c5c5c5;
border-top: 1px solid white;
}

dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }

.hides { display: none;}    /** i also changed it here **/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>



<html>
<head>
<meta charset=utf-8>
<title></title>


</head>
<body>

<dl>

     <dt>title</dt>
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer     quis porttitor erat.
        </dd>

     <dt>title</dt>
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat. 
        </dd>
</dl>

</body>
</html>

his class name is `hides` so why should that be an issue? – SamGhatak May 10 '16 at 13:02 — SamGhatak, May 10 '16 at 13:02

score 0 · Answer 2 · answered May 10 '16 at 12:57

0

It's most probably a versions compatibility problem. I will recommand to use Bower a package manager to avoid this kind of version and dependencies conflicts.

 npm install -g bower
 bower install bootstrap
 bower install jquery

then find your *.css and *.js files within the bower_components folder:

<link rel="stylesheet" href="bower_components/.../bootstrap.css"> 
<link rel="stylesheet" href="style.css" type="text/css">
<script src="bower_components/.../jquery.js"></script>
<script src="bower_components/.../bootstrap.js"></script>

answered May 10 '16 at 12:57

Dhia

10,119
11
58
69

Bower only works if you own a server yourself, it doesn't work with free or shared hostings sadly ;( – node_modules May 10 '16 at 12:59
But you still can develop locally then upload through ftp. – Dhia May 10 '16 at 13:02
1

That was very nice of you to answer. I appreciate – NewBee Jul 14 '16 at 07:54

Shoeb Mirza · Answer 3 · 2016-05-10T13:07:37.280

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

(function(){
var dd =  $('dd') ;

dd.filter(':nth-child(n+2)').addClass('hide'); 

$('dl').on('click', 'dt', function(){ 

     $(this).
        next()
            .slideDown(200)
            .siblings('dd')
               .slideUp(200);
});

})();

body {
width: auto;
margin: 20px;
}

dd {
margin: 0;

padding: 1em 0;
}

dt {
cursor: pointer;
font-weight: bold;
font-size : 1.5em;
line-height: 2em;
background: #e3e3e3;
border-bottom: 1px solid #c5c5c5;
border-top: 1px solid white;
}

dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }

.hide { display: none;}

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<dl>

     <dt>title</dt>
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer     quis porttitor erat.
        </dd>

     <dt>title</dt>
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis porttitor erat. 
        </dd>
</dl>

Working Codepen

score 0 · Answer 4 · answered May 10 '16 at 13:06

   (function(){
    $('dd').hide();
    $('dt').on('click', function(){ 
    if($(this).next("dd").is(":visible")) {
        $(this).next("dd").hide(200);
    } else {
        $(this).next("dd").show(200);
    }
    });
    })();

Working Fiddle

Bootstrap isn't working with jQuery

4 Answers4