I've been dealing with a problem for the past 24 hours. I want to implement a horizontal accordion with breadcrumbs on a webpage. How can I achieve this dynamically, so that when a user clicks on any link in the accordion, the breadcrumbs update simultaneously? It's proving to be quite tricky for me. Any suggestions?
Is there a way to update the breadcrumbs with every panel click?
$('.items a').on('click', function() {
var $this = $(this),
$bc = $('<div class="item"></div>');
$this.parents('li').each(function(n, li) {
var $a = $(li).children('a').clone();
$bc.prepend(' / ', $a);
});
$('.breadcrumb').html( $bc.prepend('<a href="#Title One">test</a>') );
return false;
}) article.accordion {
display: block;
width: 43em;
margin: 0 auto;
background-color: #666;
overflow: auto;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}
/* CSS styles continue here */
article.accordion section,
article.accordion section h2 {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="breadcrumb">
<div class="item"><a href="#acc1">Test/ </a></div>
</div>
<br>
<article class="accordion">
<section id="acc1">
<h2><a href="#acc1" class="items" >Title One</a></h2>
<p>This content appears on page 1.</p>
</section>
<section id="acc2">
<h2><a href="#acc2" class="items">Title Two</a></h2>
<p>This content appears on page 2.</p>
</div>
</section>
<section id="acc3">
<h2><a href="#acc3" class="items" >Title Three</a></h2>
<p>This content appears on page 3.</p>
</section>
<section id="acc4">
<h2><a href="#acc4">Title Four</a></h2>
<p>This content appears on page 4.</p>
</section>
<section id="acc5">
<h2><a href="#acc5">Title Five</a></h2>
<p>This content appears on page 5.</p>
</section>
</article>
</body>
</html>