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" data-parent="#accordion1" href="#collapseOne">Kiewit</a></h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="panel-group inner" id="accordion2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne1">East</a></h4>
                        </div>
                        <div id="collapseOne1" class="panel-collapse collapse">
                            <div class="panel-body">Content here...</div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2">West</a></h4>
                        </div>
                        <div id="collapseOne2" class="panel-collapse collapse in">
                            <div class="panel-body">Content here...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">Vulcan Materials</a></h3>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">Content here...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">Copper Springs</a></h3>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">Content here...</div>
        </div>
    </div>
</div>

JS==> TESTED

<script>
 // Toggle plus minus icon on show hide of collapse element

$(".collapse").on('show.bs.collapse', function(e){ if(this != e.target){ return 0;} $(this).parent().find(".glyphicon:first").removeClass("glyphicon-plus").addClass("glyphicon-minus"); }).on('hide.bs.collapse', function(e){ if(this != e.target){ return 0;} $(this).parent().find(".glyphicon:first").removeClass("glyphicon-minus").addClass("glyphicon-plus"); });

</script>
</body>
</html>






Comments

Post a Comment

Popular posts from this blog

datatable with both top and bottom scroll bar.

-
Image
HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>     <head>         <title></title>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>          -->          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>         <script type="text/javascript" src="jquery.doubleScroll.js"></script>         <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/j...
Read more

Display Loader and disable page while waiting for ajax request

-
  I have a project in which I use MVC C#, with Bootstrap and FontAwesome. My objective is to show a spinner and disable the page while waiting for an ajax request. So far, I have successfully acomplished this goal with the following code: HTML: <div id = 'ajax_loader' style = " position : fixed ; left : 50% ; top : 50% ; display : none ; " > <img src = "~/Images/ajax-loader.gif" > </div> JS: function blablabla () { //show spinner, disable page var modal = $ ( '<div>' ). dialog ({ modal : true }); modal . dialog ( 'widget' ). hide (); $ ( '#ajax_loader' ). show (); $ . ajax ({ type : "Get" , url : url , success : function ( result ) { alert ( "success! " + result ); }, error : functi...
Read more

Invalid bean property or is not readable to loading Jsp page

-
sometime we have face issue related to that bean property is not readable in Spring MVC or you may also call bean  has invalid getter method. so our problem looks like below mentioned.This is an error which displays on your framework console. Problem- org.springframework.beans.NotReadablePropertyException: Invalid property 'loginId11111' of bean class [*.model.LoginForm]: Bean property 'loginId11111' is not readable or has an invalid getter method: Does the return type of the getter match the parameter type of the setter? at org.springframework.beans.AbstractNestablePropertyAccessor. getPropertyValue(AbstractNestablePropertyAccessor.java:619) at org.springframework.beans.AbstractNestablePropertyAccessor. getPropertyValue(AbstractNestablePropertyAccessor.java:610) at org.springframework.validation.AbstractPropertyBindingResult. getActualFieldValue(AbstractPropertyBindingResult.java:99) at org.springframework.validation.AbstractBindingResult. getFieldValue(Abstr...
Read more