Twitter bootstrap 3.0 icon change on collapse

前端未结

关注

 10  1210

This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.

I have searched far and wide, and have

相关标签:

10条回答

野性不改

2020-12-04 19:54

The collapse events are handled differently in Bootstrap 3. Now it would be something like:

$('#collapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
});

Demo: http://www.bootply.com/73101

0 讨论(0)

[愿得一人]

2020-12-04 20:06

This code finds your accordion with the ID of 'Accordion'. When the shown event fires on the collapsed panel, the icon is found in the header panel (the previous element) and it finds and changes your glyph icon element within that HTML code block:

$('#accordion .panel-collapse').on('shown.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});

//The reverse of the above on hidden event:

$('#accordion .panel-collapse').on('hidden.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});

0 讨论(0)

渐次进展

2020-12-04 20:11

The complete code for collapse multiple div with icons in bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Accordion with Plus/Minus Icon</title>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
    .panel-title .glyphicon{
        font-size: 14px;
    }
</style>
<script>
    $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.in").each(function(){
            $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
        });

        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
            $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
            $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span> What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span> What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>

0 讨论(0)

误落风尘

2020-12-04 20:12

Using only CSS, the bootstrap collapse icon can be changed with your predefined icons:

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}
a[aria-expanded=false] .glyphicon-minus {
    display: none;
}
.pointer{
  cursor:pointer;
}

<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
  <span class="pull-left title-sidebar">Filter By Price</span>
  <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
  <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
  <div class="clearfix"></div>
</a>
<div id="testCollpase" class="collapse">
  <ul>
    <li><a href="#">500$</a></li>
    <li><a href="#">1000$</a></li>
  </ul>
</div>

In your HTML add aria-expanded="false" and add two icons what you need to set in your collapse bar. Like,

<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
  <span class="pull-left title-sidebar">Filter By Price</span>
  <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
  <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
</a>

And control it from css. When collapse bar expand then

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}

otherwise it will be

a[aria-expanded=false] .glyphicon-minus {
    display: none;
}

Run the snippet and I think you just need this...

0 讨论(0)

我寻月下人不归

2020-12-04 20:13

The collapse events are handled as:

$('#collapse').on('shown.bs.collapse', function () {
   $(".glyphicon")
      .removeClass("glyphicon-folder-close")
      .addClass("glyphicon-folder-open");
 });

 $('#collapse').on('hidden.bs.collapse', function () {
    $(".glyphicon")
       .removeClass("glyphicon-folder-open")
       .addClass("glyphicon-folder-close");
 });

0 讨论(0)

旧巷少年郎

2020-12-04 20:14

This one working just fine for bootstrap collapse:

<script>
    $(document).ready(function () {
        $('#collapseExample').on('hidden.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
            })
        $('#collapseExample').on('shown.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
            })
        });
</script>

This is the HTML code I using:

<div class="collapse" id="collapseExample">
     <div class="well">
     ...
     </div>
</div>
<button class="btn btn-default" type="button" data-toggle="collapse" data-         target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
     <span id="btnDown" class="glyphicon glyphicon-chevron-down"></span>
     Settings
</button>

0 讨论(0)

1 2 下一页