Question

42

bootstrap accordion not working properly

rated 0 times [ 48] [ 6] / answers: 1 / hits: 18779 / 11 Years ago, tue, october 29, 2013, 12:00:00

i am trying to develop bootstrap accordion and it works fine in jsfiddle
But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page

<meta name=viewport content=width=device-width, initial-scale=1.0> 

<link href=http://getbootstrap.com/2.3.2/assets/css/bootstrap.css rel=stylesheet> 

<link href=http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css rel=stylesheet> 

<script type=text/javascript src=https://code.jquery.com/jquery.min.js></script> 

<script type=text/javascript src=http://getbootstrap.com/2.3.2/assets/js/bootstrap.js></script> 

    <link href=http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css rel=stylesheet>

    <link rel=stylesheet type=text/css media=screen

     href=http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css>

Even I had replaced <script src=http://code.jquery.com/jquery-1.9.1.min.js></script> in place of <script type=text/javascript src=https://code.jquery.com/jquery.min.js></script> but no luck.Please tell me what else do i need?
enter

Following is the full code

<%@ page import=java.sql.* %>

<%@ page import=DB.* %>

<%@ page language=java contentType=text/html; charset=UTF-8

    pageEncoding=UTF-8%>

<!DOCTYPE html> 

<html lang=en> 

<head> 

<meta charset=utf-8> 

<title>send sms</title> 

<meta name=viewport content=width=device-width, initial-scale=1.0> 

<link href=http://getbootstrap.com/2.3.2/assets/css/bootstrap.css rel=stylesheet> 

<link href=http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css rel=stylesheet> 

<script type=text/javascript src=https://code.jquery.com/jquery.min.js></script> 

<script type=text/javascript src=http://getbootstrap.com/2.3.2/assets/js/bootstrap.js></script> 

    <link href=http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css rel=stylesheet>

    <link rel=stylesheet type=text/css media=screen

     href=http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css>

</head> 

<body> 

<div class=tabbable id=myTabs> 

<ul class=nav nav-tabs> 



<li class=active><a href=#tab1 data-toggle=tab>Send Message</a></li> 

<li><a href=#tab2 data-toggle=tab>Users</a></li> 

<li><a href=#tab3 data-toggle=tab>Group Message</a></li> 

<li><a href=#tab4 data-toggle=tab id=signout>Sign Out</a></li> 

</ul> 

<div class=tab-content> 

<div class=tab-pane active id=tab1> 

<div class=btn-group-vertical pull-right data-toggle=buttons-radio>



<%

DataBaseConnection db=new DataBaseConnection();

Connection con=db.connet();

PreparedStatement pt=con.prepareStatement(select * from registerSmsUsers);

ResultSet rs=pt.executeQuery();int i=1;

while(rs.next())

{%>

  <button type=button class=btn btn-primary btn-block id=<%=rs.getString(mobile)%>><%=rs.getString(name)%></button>





<%i++;}



%></div>

<div class=container>

        <div class=row>

            <div class=span12>

                <h3>Send SMS to Individual number</h3>

                <form class=form-signin action=# method=post onsubmit=return false;>

                    <div class=row>

                        <div class=span3>

                            Enter Number to send:

                        </div>

                        <div class=span3>

<!-- <input type=text name=toNumber id=number maxlength=13 placeholder=Enter 10 digits number to send value=+22 rel=popover/> -->

<!--<input type=text name=toNumber id=number maxlength=13 placeholder=Enter 10 digits number to send value=+2222 rel=popover data-trigger=hover data-delay='{show:10, hide:3000}'/>-->

<input type=text name=toNumber id=number maxlength=13 placeholder=Enter 10 digits number to send value=+2222 rel=popover data-trigger=hover />



                        </div>

                        <!--<div class=span6>

                            <div class=alert>

                                <button type=button class=close data-dismiss=alert>&times;</button>

                                Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />



                            </div>

                        </div>-->

                    </div>

                    <div class=row>

                        <div class=span3>

                            Enter Message to send:

                        </div>

                        <div class=span3> <div id=datetimepicker class=input-append date> 

<input style=display:none type=text name=body maxlength=160 placeholder=Enter message to send class=.dtext id=body data-trigger=hover/> 

<input type=text id=txt style=display:none/> 

<textarea rows=9 cols=50 class=darea1 id=darea></textarea><span class=add-on> 

<i data-time-icon=icon-time data-date-icon=icon-calendar></i> 

</span> 

</div> 

</div> 

                        <!--<div class=span6>

                            <div class=alert>

                                <button type=button class=close data-dismiss=alert>&times;</button>

                                The text of the message you want to send, limited to 160 characters.

                            </div>

                        </div>-->

                    </div>

                    <div class=row>

                        <div class=span3>

                        </div>

                        <div class=span9>

                            <button class=btn type=submit id=openAlert >Send</button>



                        </div>

                    </div>

                </form>

            </div>

        </div>





 <div id=le-alert class=alert alert-warn alert-block fade>

      <button href=# type=button class=close>&times;</button>

      <h4>Successful</h4>

      <p>Message sent successfully</p>

    </div>

    </div>

</div> 

<!-- 2nd tab strats -->

<div class=tab-pane id=tab2> 







 <form class=well span9 action=insertNew method=post> 

<div class=row> 

<div class=span3> 

<label>Name</label> 

<input type=text id=fields class=span4 placeholder=Your full Name name=username required> 



</div> 

<div class=span3> 



<label>Email Address</label> 

<input type=email id=fields1 class=span4 placeholder=Your email address name=email required> 

</div> 

<div class=span3> 

<label>Mobile</label> 

<input type=tel id=fields2 class=span4 placeholder=+756762462182 name=mobile maxLength=13 required > 

</div> 

</div> 

<input type=button id=btn1 class=btn btn-lg btn-primary value=Add>

</form> 

    <input type=button id=btn2 class=btn btn-lg btn-primary value=Group>



<!-- accordion strats-->



<div class=accordion id=accordion2>

    <div class=accordion-group>

        <div class=accordion-heading>

            <a class=accordion-toggle data-toggle=collapse data-parent=#accordion2 href=#collapseOne>

                records

            </a>

        </div>

        <div id=collapseOne class=accordion-body collapse in>

            <div class=accordion-inner>

<table border=1 id=mytable class=table/>

<tr>

<th>Add</th>

<th>Username</th>

<th>EmailId</th>

<th>Mobile No</th>

</tr>

</table>            </div>

        </div>

    </div>

    <div class=accordion-group>

        <div class=accordion-heading>

            <a class=accordion-toggle data-toggle=collapse data-parent=#accordion2 href=#collapseTwo>

                Collapsible Group Item #2

            </a>

        </div>

        <div id=collapseTwo class=accordion-body collapse>

            <div class=accordion-inner>

groups here         </div>

        </div>

    </div>

</div>



<!-- accordion ends-->

<!--<table border=1 id=mytable class=table/>

<tr>

<th>Add</th>

<th>Username</th>

<th>EmailId</th>

<th>Mobile No</th>

</tr>

</table>-->

</div> 

<!-- 2nd tab ends -->

<div class=tab-pane id=tab3> 

<p>para in section 3</p> 

</div> 

</div> 

</div> 

<script> 

$(function() { 

$(#datetimepicker).datetimepicker({ 

format: 'dd/MM/yyyy hh:mm:ss', 

linkField: #txt, 

linkFormat: yyyy-mm-dd hh:ii, 

autoclose: true, 

}); 



jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){ 

$(.darea1).val($( .darea1 ).val()+$( #txt ).val()); 

}); 



}); 



</script> 

<script> 

$('#tabAll').click(function(){ 

$('#tabAll').addClass('active'); 

$('.tab-pane').each(function(i,t){ 

$('#myTabs li').removeClass('active'); 

$(this).addClass('active'); 

}); 

}); 

$('body').on('click', '.btn', function(){ 

if(this.id=='openAlert')

    {$('#number').val('');}else{$('#number').val(this.id);}

});

</script> 

<script >







        $(document).ready(function(){

$(#signout).click(function() { 

    window.location.replace(logout.jsp); 

});

//next line

var val=0;

$(document).ready(function(){





  $('#btn1').click(function(){

      if($(.span4).val()!=)

      {

  $(#mytable).append('<tr id=mytr'+val+'></tr>');

  $(#mytr+val).append('<td class=cb><input type=checkbox value=yes name=mytr'+val+' checked ></td>');



             $(.span4).each(function () {



             $(#mytr+val).append(<td >+$(this).val()+</td>);



              });

              val++;

      }

      else

      {

          alert(please fill the form completely);

      }

              });

    $('#btn2').click(function(){

        var creat_group=confirm(Do you want to creat a group??);

        if(val>1){

           alert(creat_group);





              }

    });









});



//

        $('#openAlert').click(function(){



            var number = $('#number').val(); // If its a text input could use .text()

            var msg = $('#darea').val(); //If its a text input could use .text()

alert(msg);

            $.ajax(

                {

                    type: POST,

                    url: messageSending.jsp, //Your full URL goes here

                    data: { toNumber: number, body: msg},

                    success: function(data, textStatus, jqXHR){

                        alert(data);                  

                    },

                    error: function(jqXHR){

                        alert(jqXHR.responseStatus);

                    }

                });

        });

    });

        </script>

<script>  

$(function ()  

{ $(#number).popover({title: 'Enter Mobile Number',content: Please enter 10 digit mobile number prefixed by country code eg +911234567890});  

});  

$(function ()  

{ $(#body).popover({title: 'Message Body',content: Maximum 160 characters allowed});  

});

</script>  

  <script type=text/javascript

     src=http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js>

    </script> 

    <script type=text/javascript

     src=http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js>

    </script>

    <script type=text/javascript

     src=http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js>

    </script>

    <script type=text/javascript

     src=http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js>

    </script>



</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mira

Add To Favorites

Follow

Total Points: 460

Total Questions: 108

Total Answers: 99

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

mira questions

1 Nodemon: app crashed waiting for file changes before starting... on Windows

Mon, Apr 4, 22, 00:00, 2 Years ago

1 Unhandled promise rejection: ReferenceError Can't find variable

Mon, Feb 14, 22, 00:00, 2 Years ago

1 momentjs datetime format on frontend with angular

Wed, Feb 9, 22, 00:00, 2 Years ago

1 How to check if element exists in DOM in Cypress?

Sun, Mar 28, 21, 00:00, 3 Years ago

1 How do I get the IP of a user in Nuxt's asyncData method?

Sat, Aug 3, 19, 00:00, 5 Years ago

View All

answered 11 Years ago dayshadelaniej · Accepted Answer

Head

   <script src=http://code.jquery.com/jquery-1.8.3.js type=text/javascript>

        <script src=http://getbootstrap.com/2.3.2/assets/js/bootstrap.js type=text/javascript>

        <link href=http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css type=text/css rel=stylesheet>

HTML

   <div class=accordion id=accordion2>

      <div class=accordion-group>

        <div class=accordion-heading>

          <a class=accordion-toggle data-toggle=collapse data-parent=#accordion2 href=#collapseOne>

            Collapsible Group Item #1

          </a>

        </div>

        <div id=collapseOne class=accordion-body collapse in>

          <div class=accordion-inner>

            Anim pariatur cliche...

          </div>

        </div>

      </div>

      <div class=accordion-group>

        <div class=accordion-heading>

          <a class=accordion-toggle data-toggle=collapse data-parent=#accordion2 href=#collapseTwo>

            Collapsible Group Item #2

          </a>

        </div>

        <div id=collapseTwo class=accordion-body collapse>

          <div class=accordion-inner>

            Anim pariatur cliche...

          </div>

        </div>

      </div>

    </div>

Fiddle: http://jsfiddle.net/fzN4K/15/

Jquery 1.9.1 : http://jsfiddle.net/fzN4K/16/