Posts

Showing posts with the label accordion inside accordion

Nested Accordion with another Jquery script.- glyphicon:first

HTML==> <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> </head> <body> <div class="panel-group" id="accordion1">     <div class="panel panel-default">         <div class="panel-heading">             <h3 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" dat...

How to write script for changing '+' , '-' symbol in nested accordion?

what happen is that you have 2 div with the class  panel-group  one inside the other so when you click in the second  panel-group  you fire the event two times witch cause the problem. so we added one more class " .inner " with second panel-group.  So Now it will not create an issue. <!DOCTYPE html> <html lang="en"> <head>i   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> /* CSS==> */ <style>     .panel-group .panel {         border-radius: 0;...