0

I want to implement bootstrap in drupal I have the 'row' class for contact id. and added col-sm-12 for for title and desc but working.I takes the with od the container.I am doing accordian.js works fine.css for bootstrap not working

(function ($)
 {
 function contactList(){
 $('.view-content .contactDesc:first').css('display','block');
 $('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active');
 $('.view-content .contactTitle:first .glyphicon').addClass('rotate');
 $('.officeAddress .colorme:visible:odd').addClass('grey');
    $('.officeAddress .colorme:visible:even').addClass('purple');
    $('.contactTitle').click(function(){ 
    if(!$(this).hasClass('active')){
 $('.contactTitle .glyphicon ').removeClass('rotate');
 $(this).find('span.glyphicon').toggleClass('rotate');
      $('.contactDesc').slideUp();
      $('.contactTitle').removeClass('active');
   $('.contactDesc').removeClass('active');
   $(this).next('.contactDesc').addClass('active');
      $(this).next('.contactDesc').slideDown(function(){
      $('.officeAddress .colorme').removeClass('grey').removeClass('purple');
          $('.officeAddress .colorme:visible:odd').addClass('grey');
          $('.officeAddress .colorme:visible:even').addClass('purple');
      });
      $(this).addClass('active');
    } 
     });
 }
  jQuery(document).ready(function($) {
  contactList();
  });
 });
.contactForm{
    width: 960px;
    margin: 0 auto;
 margin-top: 59px;
}
.contactForm img{
 width: 960px;
 height: auto;
}
.officeAddress{
  width:960px;margin:0 auto;
  font-family: Raleway;
 }
.contactTitle{
 width:960px;
    display: inline-block;
 padding: 18px 40px 18px 40px;
 font-size:20px;
 }
.contactDesc{
 display:none;
 font-size:23px;
 padding: 40px 0 0px 0;
 font-family: Raleway-Regular;
 }
.ContactAddressHeading p,.currentOpening{
 width: 960px;
 margin: 0 auto;
 font-size: 30px;
 font-weight: bold;
 color:#000000;
 padding: 38px 0px 0px 0;
 text-align: center;
 } 
  
.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
} 
.container-fluid{
 padding:0 !important;
} 
.officeAddress .purple{
  background:#663399;
  color:#ffffff;
}
.contentWidth .purple,.contentWidth .purple p{color:#ffffff;}
.purple .glyphicon{
 color:#5d218b;
}
.grey{
  background:#f7f7f7;
  color:#6c2a9f;
}
.grey .glyphicon{color:#e2dfdf;}
.purple .row-1-col-1,.purple .row-1-col-1-right,.purple .col-email a,.purple p{
 color:#ffffff;
}
.grey .col-email a{
 color:#000000;
}
.contactTitle.purple{
 color:#ffffff;
}
.contactTitle h3{
  display: inline;
  font-size: 20px;
  font-family: Raleway-Medium;
}

.contactTitle .glyphicon{float: right;top: 6px;} 
.form_image{
    width: 960px;
    margin: 0 auto;
 margin-top: 85px;
}
.form_image img{
 width: 960px;
 height: auto; 
}
#ContactAddressHeading { margin-bottom: 55px;}
#contact{ margin-bottom: 60px;}
.officeAddress{width:960px;}
.contactDesc {display: none;font-size: 18px;}
.col-img { margin-bottom:10px; }
.row-1-col-1 { float:left; padding: 0px 0 0px 70px;}
.row-1-col-1-right { min-height: 250px;float:right; padding: 0px 40px 0px 0;}
.addressImg{float:left;}
.col-address,.col-tele,.col-email{padding-left: 15px;float:left;}
.col-address span{font-family: Raleway-SemiBold;font-size: 14px;}
.address, .tele , .email{display:inline-block;}
.row-1-col-1-right .tele{
 width: 100%;
}
.address{padding-bottom: 5px;}
.grey .row-1-col-1,.grey .row-1-col-1-right,.grey .row-1-col-1 p,.grey .row-1-col-1-right p{color:#000000;}
.col-email p,.col-email div,.col-tele p,.col-tele div{display:inline;}
.contactDesc  .views-row{padding-bottom:40px;}
.col-address div p {font-size: 14px;font-family: Raleway-Regular;margin: 0 0 1px;}
@media(min-width:0px)and (max-width:780px){
 
 .row-1-col-1-right{
  float:left;
  padding:0px 0 0px 0px;
  min-height:250px;
 }
 .row-1-col-1{padding:0;}
 .contactDesc{
  float:left;
  width:100%;
 }
 .address{
  float:left;
  width:100%;
 }
 .ContactAddressHeading p{
  width:auto;
  font-size: 25px;
  padding: 25px 0px 0px 0;
 }
 #ContactAddressHeading{
  margin-bottom: 25px;
 }
 #contactForm{
  display:none;
 }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="contact" class="row">
 <div class="view view-contact view-id-contact view-display-id-block view-dom-id-afcbc0b58ed02301ac5efcccfc9ea312">
  <div class="view-content">
   <div class="officeAddress">
    <div class="contactTitle colorme col-sm-12 col-md-12 active purple">
     <h3>Chennai -India</h3>
     <span class="glyphicon glyphicon-triangle-right rotate"></span>
    </div>
    <div class="contactDesc col-sm-12 col-md-12 colorme active grey" style="display: block;">
     <!-- <div class="contentWidth col-md-12 col-sm-12"> -->
     <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
      <!--</div></div> -->
     </div>
     <div class="col-sm-12 col-md-6 row-1-col-1-right views-row views-row-2 views-row-even">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
      <!--</div></div> -->
     </div>
     <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-3 views-row-odd views-row-last">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
     </div>
     <!-- </div>  -->
    </div>
   </div>
   <div class="officeAddress">
    <div class="contactTitle colorme col-sm-12 col-md-12 purple">
     <h3>Hyderabad - India</h3>
     <span class="glyphicon glyphicon-triangle-right"></span>
    </div>
    <div class="contactDesc col-sm-12 col-md-12 colorme">
     <!-- <div class="contentWidth col-md-12 col-sm-12"> -->
     <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first views-row-last">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
     
   </div>
  </div>
 </div>
</div>
</div></div>
user3386779
  • 5,675
  • 12
  • 49
  • 109
  • Have you include the Jquery script before including the bootstrap script? Bootstrap need jquery.js to work. (I don't see the include of the jquery.js in the html file) – samAlvin Jun 14 '17 at 10:49

3 Answers3

0

Please add jquery before the bootstrap.js

Manoj Kadolkar
  • 681
  • 9
  • 21
0

Your issue is in this function:

    (function ($)
            ......
    })

Change it to:

    (function ($)
            ......
    })(jQuery);

For more details you can take a look to What does (function($) {})(jQuery); mean?

Working snippet: 

(function ($)
{
    function contactList(){
        $('.view-content .contactDesc:first').css('display','block');
        $('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active');
        $('.view-content .contactTitle:first .glyphicon').addClass('rotate');
        $('.officeAddress .colorme:visible:odd').addClass('grey');
        $('.officeAddress .colorme:visible:even').addClass('purple');
        $('.contactTitle').click(function(){
            if(!$(this).hasClass('active')){
                $('.contactTitle .glyphicon ').removeClass('rotate');
                $(this).find('span.glyphicon').toggleClass('rotate');
                $('.contactDesc').slideUp();
                $('.contactTitle').removeClass('active');
                $('.contactDesc').removeClass('active');
                $(this).next('.contactDesc').addClass('active');
                $(this).next('.contactDesc').slideDown(function(){
                    $('.officeAddress .colorme').removeClass('grey').removeClass('purple');
                    $('.officeAddress .colorme:visible:odd').addClass('grey');
                    $('.officeAddress .colorme:visible:even').addClass('purple');
                });
                $(this).addClass('active');
            }
        });
    }
    jQuery(document).ready(function($) {
        contactList();
    });
})(jQuery);
.contactForm{
    width: 960px;
    margin: 0 auto;
    margin-top: 59px;
}
.contactForm img{
    width: 960px;
    height: auto;
}
.officeAddress{
    width:960px;margin:0 auto;
    font-family: Raleway;
}
.contactTitle{
    width:960px;
    display: inline-block;
    padding: 18px 40px 18px 40px;
    font-size:20px;
}
.contactDesc{
    display:none;
    font-size:23px;
    padding: 40px 0 0px 0;
    font-family: Raleway-Regular;
}
.ContactAddressHeading p,.currentOpening{
    width: 960px;
    margin: 0 auto;
    font-size: 30px;
    font-weight: bold;
    color:#000000;
    padding: 38px 0px 0px 0;
    text-align: center;
}

.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.container-fluid{
    padding:0 !important;
}
.officeAddress .purple{
    background:#663399;
    color:#ffffff;
}
.contentWidth .purple,.contentWidth .purple p{color:#ffffff;}
.purple .glyphicon{
    color:#5d218b;
}
.grey{
    background:#f7f7f7;
    color:#6c2a9f;
}
.grey .glyphicon{color:#e2dfdf;}
.purple .row-1-col-1,.purple .row-1-col-1-right,.purple .col-email a,.purple p{
    color:#ffffff;
}
.grey .col-email a{
    color:#000000;
}
.contactTitle.purple{
    color:#ffffff;
}
.contactTitle h3{
    display: inline;
    font-size: 20px;
    font-family: Raleway-Medium;
}

.contactTitle .glyphicon{float: right;top: 6px;}
.form_image{
    width: 960px;
    margin: 0 auto;
    margin-top: 85px;
}
.form_image img{
    width: 960px;
    height: auto;
}
#ContactAddressHeading { margin-bottom: 55px;}
#contact{ margin-bottom: 60px;}
.officeAddress{width:960px;}
.contactDesc {display: none;font-size: 18px;}
.col-img { margin-bottom:10px; }
.row-1-col-1 { float:left; padding: 0px 0 0px 70px;}
.row-1-col-1-right { min-height: 250px;float:right; padding: 0px 40px 0px 0;}
.addressImg{float:left;}
.col-address,.col-tele,.col-email{padding-left: 15px;float:left;}
.col-address span{font-family: Raleway-SemiBold;font-size: 14px;}
.address, .tele , .email{display:inline-block;}
.row-1-col-1-right .tele{
    width: 100%;
}
.address{padding-bottom: 5px;}
.grey .row-1-col-1,.grey .row-1-col-1-right,.grey .row-1-col-1 p,.grey .row-1-col-1-right p{color:#000000;}
.col-email p,.col-email div,.col-tele p,.col-tele div{display:inline;}
.contactDesc  .views-row{padding-bottom:40px;}
.col-address div p {font-size: 14px;font-family: Raleway-Regular;margin: 0 0 1px;}
@media(min-width:0px)and (max-width:780px){

    .row-1-col-1-right{
        float:left;
        padding:0px 0 0px 0px;
        min-height:250px;
    }
    .row-1-col-1{padding:0;}
    .contactDesc{
        float:left;
        width:100%;
    }
    .address{
        float:left;
        width:100%;
    }
    .ContactAddressHeading p{
        width:auto;
        font-size: 25px;
        padding: 25px 0px 0px 0;
    }
    #ContactAddressHeading{
        margin-bottom: 25px;
    }
    #contactForm{
        display:none;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="contact" class="row">
    <div class="view view-contact view-id-contact view-display-id-block view-dom-id-afcbc0b58ed02301ac5efcccfc9ea312">
        <div class="view-content">
            <div class="officeAddress">
                <div class="contactTitle colorme col-sm-12 col-md-12 active purple">
                    <h3>Chennai -India</h3>
                    <span class="glyphicon glyphicon-triangle-right rotate"></span>
                </div>
                <div class="contactDesc col-sm-12 col-md-12 colorme active grey" style="display: block;">
                    <!-- <div class="contentWidth col-md-12 col-sm-12"> -->
                    <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first">
                        <!--<div class="contentWidth"><div class="row-1-col-1"> -->
                        <div class="address"></div>
                        <div class="tele"></div>
                        <div class="contactMail"></div>
                        <!--</div></div> -->
                    </div>
                    <div class="col-sm-12 col-md-6 row-1-col-1-right views-row views-row-2 views-row-even">
                        <!--<div class="contentWidth"><div class="row-1-col-1"> -->
                        <div class="address"></div>
                        <div class="tele"></div>
                        <div class="contactMail"></div>
                        <!--</div></div> -->
                    </div>
                    <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-3 views-row-odd views-row-last">
                        <!--<div class="contentWidth"><div class="row-1-col-1"> -->
                        <div class="address"></div>
                        <div class="tele"></div>
                        <div class="contactMail"></div>
                    </div>
                    <!-- </div>  -->
                </div>
            </div>
            <div class="officeAddress">
                <div class="contactTitle colorme col-sm-12 col-md-12 purple">
                    <h3>Hyderabad - India</h3>
                    <span class="glyphicon glyphicon-triangle-right"></span>
                </div>
                <div class="contactDesc col-sm-12 col-md-12 colorme">
                    <!-- <div class="contentWidth col-md-12 col-sm-12"> -->
                    <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first views-row-last">
                        <!--<div class="contentWidth"><div class="row-1-col-1"> -->
                        <div class="address"></div>
                        <div class="tele"></div>
                        <div class="contactMail"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
gaetanoM
  • 39,803
  • 6
  • 34
  • 52
0

Continuing my comment, you must put the jquery.js before including the bootstrap script and style.

(function ($)
 {
 function contactList(){
 $('.view-content .contactDesc:first').css('display','block');
 $('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active');
 $('.view-content .contactTitle:first .glyphicon').addClass('rotate');
 $('.officeAddress .colorme:visible:odd').addClass('grey');
    $('.officeAddress .colorme:visible:even').addClass('purple');
    $('.contactTitle').click(function(){ 
    if(!$(this).hasClass('active')){
 $('.contactTitle .glyphicon ').removeClass('rotate');
 $(this).find('span.glyphicon').toggleClass('rotate');
      $('.contactDesc').slideUp();
      $('.contactTitle').removeClass('active');
   $('.contactDesc').removeClass('active');
   $(this).next('.contactDesc').addClass('active');
      $(this).next('.contactDesc').slideDown(function(){
      $('.officeAddress .colorme').removeClass('grey').removeClass('purple');
          $('.officeAddress .colorme:visible:odd').addClass('grey');
          $('.officeAddress .colorme:visible:even').addClass('purple');
      });
      $(this).addClass('active');
    } 
     });
 }
  jQuery(document).ready(function($) {
  contactList();
  });
 });
.contactForm{
    width: 960px;
    margin: 0 auto;
 margin-top: 59px;
}
.contactForm img{
 width: 960px;
 height: auto;
}
.officeAddress{
  width:960px;margin:0 auto;
  font-family: Raleway;
 }
.contactTitle{
 width:960px;
    display: inline-block;
 padding: 18px 40px 18px 40px;
 font-size:20px;
 }
.contactDesc{
 display:none;
 font-size:23px;
 padding: 40px 0 0px 0;
 font-family: Raleway-Regular;
 }
.ContactAddressHeading p,.currentOpening{
 width: 960px;
 margin: 0 auto;
 font-size: 30px;
 font-weight: bold;
 color:#000000;
 padding: 38px 0px 0px 0;
 text-align: center;
 } 
  
.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
} 
.container-fluid{
 padding:0 !important;
} 
.officeAddress .purple{
  background:#663399;
  color:#ffffff;
}
.contentWidth .purple,.contentWidth .purple p{color:#ffffff;}
.purple .glyphicon{
 color:#5d218b;
}
.grey{
  background:#f7f7f7;
  color:#6c2a9f;
}
.grey .glyphicon{color:#e2dfdf;}
.purple .row-1-col-1,.purple .row-1-col-1-right,.purple .col-email a,.purple p{
 color:#ffffff;
}
.grey .col-email a{
 color:#000000;
}
.contactTitle.purple{
 color:#ffffff;
}
.contactTitle h3{
  display: inline;
  font-size: 20px;
  font-family: Raleway-Medium;
}

.contactTitle .glyphicon{float: right;top: 6px;} 
.form_image{
    width: 960px;
    margin: 0 auto;
 margin-top: 85px;
}
.form_image img{
 width: 960px;
 height: auto; 
}
#ContactAddressHeading { margin-bottom: 55px;}
#contact{ margin-bottom: 60px;}
.officeAddress{width:960px;}
.contactDesc {display: none;font-size: 18px;}
.col-img { margin-bottom:10px; }
.row-1-col-1 { float:left; padding: 0px 0 0px 70px;}
.row-1-col-1-right { min-height: 250px;float:right; padding: 0px 40px 0px 0;}
.addressImg{float:left;}
.col-address,.col-tele,.col-email{padding-left: 15px;float:left;}
.col-address span{font-family: Raleway-SemiBold;font-size: 14px;}
.address, .tele , .email{display:inline-block;}
.row-1-col-1-right .tele{
 width: 100%;
}
.address{padding-bottom: 5px;}
.grey .row-1-col-1,.grey .row-1-col-1-right,.grey .row-1-col-1 p,.grey .row-1-col-1-right p{color:#000000;}
.col-email p,.col-email div,.col-tele p,.col-tele div{display:inline;}
.contactDesc  .views-row{padding-bottom:40px;}
.col-address div p {font-size: 14px;font-family: Raleway-Regular;margin: 0 0 1px;}
@media(min-width:0px)and (max-width:780px){
 
 .row-1-col-1-right{
  float:left;
  padding:0px 0 0px 0px;
  min-height:250px;
 }
 .row-1-col-1{padding:0;}
 .contactDesc{
  float:left;
  width:100%;
 }
 .address{
  float:left;
  width:100%;
 }
 .ContactAddressHeading p{
  width:auto;
  font-size: 25px;
  padding: 25px 0px 0px 0;
 }
 #ContactAddressHeading{
  margin-bottom: 25px;
 }
 #contactForm{
  display:none;
 }
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="contact" class="row">
 <div class="view view-contact view-id-contact view-display-id-block view-dom-id-afcbc0b58ed02301ac5efcccfc9ea312">
  <div class="view-content">
   <div class="officeAddress">
    <div class="contactTitle colorme col-sm-12 col-md-12 active purple">
     <h3>Chennai -India</h3>
     <span class="glyphicon glyphicon-triangle-right rotate"></span>
    </div>
    <div class="contactDesc col-sm-12 col-md-12 colorme active grey" style="display: block;">
     <!-- <div class="contentWidth col-md-12 col-sm-12"> -->
     <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
      <!--</div></div> -->
     </div>
     <div class="col-sm-12 col-md-6 row-1-col-1-right views-row views-row-2 views-row-even">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
      <!--</div></div> -->
     </div>
     <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-3 views-row-odd views-row-last">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
     </div>
     <!-- </div>  -->
    </div>
   </div>
   <div class="officeAddress">
    <div class="contactTitle colorme col-sm-12 col-md-12 purple">
     <h3>Hyderabad - India</h3>
     <span class="glyphicon glyphicon-triangle-right"></span>
    </div>
    <div class="contactDesc col-sm-12 col-md-12 colorme">
     <!-- <div class="contentWidth col-md-12 col-sm-12"> -->
     <div class="col-sm-12 col-md-6 row-1-col-1 views-row views-row-1 views-row-odd views-row-first views-row-last">
      <!--<div class="contentWidth"><div class="row-1-col-1"> -->
      <div class="address"></div>
      <div class="tele"></div>
      <div class="contactMail"></div>
     
   </div>
  </div>
 </div>
</div>
</div></div>
samAlvin
  • 1,605
  • 7
  • 31