CODEWITHSUNDEEP
jquerycsswordpresstwitter-bootstrap-3
Omar
Omar

Reputation: 3050

WordPress isn't removing Bootstrap's collapse class 'in'

I am using a Bootstrap collapse areas to hide info until the panel is collapsed. I have to show you my site because I cannot recreate the problem in JSfiddle because it works there but not on my site...

I recently made a WordPress theme of this site and though the collapse worked on the static site, it is not working in WordPress. Take a look: jsfiddle ---- the wordpress site

            <!-- g3 --> 

                <div class="row">
                    <div class="well main-wells">

                        <h2 class="text-center"><a href="javascript:void(0)" data-toggle="collapse" data-target="#g3">About</a></h2>

                        <div id="g3" class="collapse g3">

                           <div class="container-fluid">
                                <div class="col-sm-6">
                                    <img src="<?php get_template_directory_uri() ?>/assets/img/me.png" class="img-responsive" alt="">
                                </div>
                                <div class="col-sm-6">
                                <p>I combine technology and design to make great user experiences. Having worked in different businesses in various roles, I am accustomed to rapidly changing technology. I enjoy working in challenging environments and learning new technology. Over the years, I learned to meet my objectives through organization and contributing creativity, knowledge, and recommendations based on the needs of the task.</p>
                                <hr><h4>Mission</h4>
                                <blockquote>To produce innovative, value intensive products by cultivating my creativity and capabilities with dedication, while always supporting the bigger, common goal.</blockquote>
                           </div><!-- row -->
                                </div>


                      </div> <!-- g3/collapse -->
                    </div><!-- well -->
                </div><!-- row -->

            <!-- g3 end -->

When you click the button, the panels open but when you click again the 'in' class will not remove as it should.

Any idea why the 'in' class will not remove on the WP site as it does in JSfiddle. ?

Upvotes: 0

Views: 169

Answers (1)

Devin
Devin

Reputation: 7720

In your site, you're calling your script many times, including some 404.

The 404 block:

Failed to load resource: the server responded with a status of 404 (Not Found) http://omarhabash.com/wp/assets/css/bootstrap.min.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://omarhabash.com/wp/assets/css/style.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://omarhabash.com/wp/assets/plugins/grid/component.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://omarhabash.com/wp/assets/js/modernizr.custom.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://omarhabash.com/img/star.png1
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)

then in your head you have you have script like modernizr called twice

then in your <footer> you have the same scripts you called in your <head>. Just clean up your site and it should work fine

Upvotes: 1

Related Questions