Bootstrap accordion with show / hide text in header panel

Question

if panel open Sectors and Issue tag should be hide and if panel is collapsed Sectors and Issue should be visible shown.

here is my js file

          $(window).load(function () {
            var parent = $('.panel-group .panel-heading');
            parent.each(function (i, el) {
                //el is element used for "{var parent}" class to execute value one by one 
                var el = $(el);
                var collapsed = el.find('.panel-title a').hasClass('collapsed');

                if (collapsed == true) {
                    el.find(".show-hide-si").show('slow');
                } else {
                    el.find(".show-hide-si").hide('slow');
                }

                /**
                 * this will run on click to show and hide for sector&issues
                 * this is tricky,if you click and class is collapsed 
                 */
                el.find('.panel-title a').click(function () {
                    var collapsed = $(this).hasClass('collapsed');
                    if (collapsed == false) {
                        el.find(".show-hide-si").show('slow');
                    } else {
                        el.find(".show-hide-si").hide('slow');
                    }
                });

            });
        });

This is working but if panel-p1 is open and i click on panel-p2 both panel text get hide.

My data is dynamic so using class like this <div id="collapse_<?php print $key; ?>" instead of collapseOne,Two,Three.

In HTML

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="panel<?php print $key; ?>">
    <div class="panel-heading" role="tab" id="heading_<?php print $key; ?>">
        <h4 class="panel-title">
            <a <?php print $clsa; ?> role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_<?php print $key; ?>" aria-expanded="true" aria-controls="collapse_<?php print $key; ?>">
                Program : <?php print $ptitle; ?>
            </a>                
        </h4>
        <div class="show-hide-si">
            <div class="sector">Sectors : <?php print $sectors_of_interes; ?></div>
            <div class="issues">Issues : <?php print $pro_problem; ?></div>
        </div>
    </div>

    <div id="collapse_<?php print $key; ?>" class="panel-collapse <?php print $clsin; ?>" role="tabpanel" aria-labelledby="heading_<?php print $key; ?>">
        <div class="panel-body">

other issue is if i click on Panel P2 it's open then i click P1(P1 which is close),P1 open but P2 didn't get close both are open.

Answer 1

See this example

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Bootstrap 3 Accordion</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style type="text/css"> .bs-example{ margin: 20px; } </style> </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">1. What is HTML?</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://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">2. What is Bootstrap?</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://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">3. 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="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> </div> </div> </body> </html>

In bootstrap you can call event methods like this

$('#accordian').on('hidden', function () {
  // do something…
})

Bootstrap accordion with show / hide text in header panel

Question

1 answers

solution1
0 2015-12-04 10:40:01

Bootstrap accordion with show / hide text in header panel

Question

1 answers

solution1 0 2015-12-04 10:40:01

solution1
0 2015-12-04 10:40:01