Twitter Bootstrap Question posted in

Twitter bootstrap – Accordion Icon is changing when Accordion-inner have some click events : Bootstrap 2.3 version

I am using bootstrap 2.3 in my project. In that there is one popover inside of accordion body, also accordions icons I am changing based on show and hide function it’s working fine. But when I have any popover inside accordion body, Once that event is trigger my icon is changing.

Steps to produce issue:

  1. open first Accordion
  2. click the “click for popover” button and check weather accordion header icon is changed or not.
  3. Try second time also, If it’s not happened on first time.

My Fiddle

$('.accordion-group').on('show', function(event) {
    $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up');
    event.stopPropagation();
});    
$('.accordion-group').on('hide', function(event) {
    $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down');
    event.stopPropagation();
});  

$('#elem').popover();
.arrow-down {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAHwAAAB8ARUP7eQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACISURBVChTvc+xCoNAEIThDXkQH8FCYhGwsRLEgJ2lEN81VQg2toIW2qVK7z9RREEtHfjg7liWOTslIZzxeJhgYhU+uOmykwQd3rpEaNEg1cMiFzyh4Rc82BU5fqjxf5xS4AstUwMtmJNBm0r4eKCHhtViMzFUTzSsGkd/W9XbrLGXO9zxeG7MBoKmGaM1wCzfAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}

.arrow-up {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAbrQAAG60BIeRSlQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAANpJREFUOE9jGJzAwsJCyM7OztPMzIwPKkQ8sLe353F2dl7v6ur6BEjPBmI1qBRxAGgAh6OjY4m7u/t/oCF/gQacBtJuUGmiAQvQC7YuLi5fgZr/Ozk5fQCyC6ByxANLS0sxoAsuAzX/dXNz+w9kzwKGDydUmijADPSSA9AVv4CG/Ae5CIhjoXL4gY2NjSjQxlKghtdQb5wGGhYClcYPgBotgQG5BqjxN9TpM4CaNaDS+AEoDQA13ABpBNr+G2hQkpWVFS9UmijABDTAEGj7DqAhIFuZIMLYAAMDAPuUQ9EUeG3QAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}
.well {
    margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion2">

	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle arrow-up" 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">

				<p>first table</p>
				<p>First Content</p>

				<div class="well">
					<a id="elem" href="#" class="btn btn-danger" rel="popover" data-original-title="Example Popover" data-content="Readymade terry richardson fap iphone skateboard. Lomo fixie pop-up, whatever pickled pour-over keytar selvage godard.">cliick for popover</a>
				</div>

			</div>
		</div>
	</div>

	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle arrow-down" 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">
				<p>second table</p>
				<p>second Content</p>
			</div>
		</div>
	</div>

</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    With the solution from above Fiddle , We need to add below line in bootstrap js plugin Where Accordion collapse options are there. We need to find "Show:function" for collapse and add line at end of that function

    this.$element.prev().find('.accordion-toggle').removeClass('collapsed')

  2. 0

    you don’t have to do the “extra” work for changing the arrow. Bootstrap adds/removes collpased class based on accordion-group state. you can use this class name to change the arrow state.

    html

    add collapsed class name to set the accordion in collapsed state

    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a>

    and remove in class name from corresponding content div

    <div id="collapseOne" class="accordion-body collapse"></div>

    css

    .accordion-toggle.collapsed {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAHwAAAB8ARUP7eQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACISURBVChTvc+xCoNAEIThDXkQH8FCYhGwsRLEgJ2lEN81VQg2toIW2qVK7z9RREEtHfjg7liWOTslIZzxeJhgYhU+uOmykwQd3rpEaNEg1cMiFzyh4Rc82BU5fqjxf5xS4AstUwMtmJNBm0r4eKCHhtViMzFUTzSsGkd/W9XbrLGXO9zxeG7MBoKmGaM1wCzfAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}

.accordion-toggle {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAbrQAAG60BIeRSlQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAANpJREFUOE9jGJzAwsJCyM7OztPMzIwPKkQ8sLe353F2dl7v6ur6BEjPBmI1qBRxAGgAh6OjY4m7u/t/oCF/gQacBtJuUGmiAQvQC7YuLi5fgZr/Ozk5fQCyC6ByxANLS0sxoAsuAzX/dXNz+w9kzwKGDydUmijADPSSA9AVv4CG/Ae5CIhjoXL4gY2NjSjQxlKghtdQb5wGGhYClcYPgBotgQG5BqjxN9TpM4CaNaDS+AEoDQA13ABpBNr+G2hQkpWVFS9UmijABDTAEGj7DqAhIFuZIMLYAAMDAPuUQ9EUeG3QAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}

    js

    remove the handles for show and hide

    // $('.accordion-group').on('show', function(event) {
//     $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up');
//     event.stopPropagation();
// });    
// $('.accordion-group').on('hide', function(event) {
//     $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down');
//     event.stopPropagation();
// });
$('#elem').popover();

    check this fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search