Hello Guys,
Please, I need help in creating a dynamic accordion that is built based on the number of clicks on the navigation menu.
So far, I have created the navigation and accordion using bootstrap but I want to know how to create the accordion based on the frequently visited/clicked pages
First of all.The number of clicks refers to user or visitor?
Second:The number of clicks is going to be stored into database or into the client side?
Third it will be our life more simple if you attach the code ff the parts that you intreresting.
I am referring to the number clicks a user make on the navigation. Secondly saving it in a database will be great.
Concerning the code I haven’t started working on it 'cus I am clueless on how to go about it.
This is the code for the naviagation, question is how to save the number of click of each nav menu in a database
<nav class="navbar navbar-default acc-overview-bar">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse acc-overview-bar-inner" id="navbar-collapse-2">
<ul class="nav navbar-nav pull-left overview-main">
<li ><a href="">My Accounts</a></li>
<li><a href="">Transfers</a></li>
<li><a href="">Loan</a></li>
<li><a href="">Investment</a></li>
<li><a href="">Self Services</a></li>
<li><a href="">Help & Support</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#"><i class="glyphicon glyphicon-earphone"></i></a></li>
<li><a href="#"><i class="glyphicon glyphicon-question-sign"></i></a></li>
<li><a href="#"><i class="glyphicon glyphicon-print"></i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
And for the accordion here is the code i used.
<div class="user-actions">
<div class="accordion-container">
<a href="#" class="accordion-toggle">Pay Bills <span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet,</p>
</div>
<!--/.accordion-content-->
</div>
<!--/.accordion-container-->
<div class="accordion-container">
<a href="#" class="accordion-toggle">Manage Debit Cards <span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet,</p>
</div>
<!--/.accordion-content-->
</div>
<!--/.accordion-container-->
<div class="accordion-container">
<a href="#" class="accordion-toggle">Open An Account <span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, </p>
</div>
<!--/.accordion-content-->
</div>
Please i would any help been rendered here. thanks.
HTML
<nav class="navbar navbar-default acc-overview-bar">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse acc-overview-bar-inner" id="navbar-collapse-2">
<ul class="nav navbar-nav pull-left overview-main">
<li id="account"><a href="">My Accounts</a></li>
<li id="transfers"><a href="">Transfers</a></li>
<li id="loan"><a href="">Loan</a></li>
<li id="investment"><a href="">Investment</a></li>
<li id="services"><a href="">Self Services</a></li>
<li id="help"><a href="">Help & Support</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#"><i class="glyphicon glyphicon-earphone"></i></a></li>
<li><a href="#"><i class="glyphicon glyphicon-question-sign"></i></a></li>
<li><a href="#"><i class="glyphicon glyphicon-print"></i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
<div class="user-actions">
</div>
JQuery
$(document).ready(function (){
localStorage.clear();
var accordionElements;
var clicks=0;
function final(){
function sortClicks(){
var sortable = [];
for (var k in localStorage) {
sortable.push([k, localStorage[k]]);
}
sortable.sort(function(a, b) {
return b[1] - a[1];
});
return sortable;
}
function createAccordionElms(arg){
accordionElements='<div class="accordion-container">'+
'<a href="#" class="accordion-toggle"'+arg+'">'+arg+'<span class="toggle-icon"><i class="fa fa-plus"></i></span></a>'+
'<div class="accordion-content">'+
'<p>Lorem ipsum dolor sit amet,</p>'+
'</div>'+
'</div>';
return accordionElements;
}
for(let i=0;i<sortClicks().length;i++){
//debugger;
$('.user-actions').append(createAccordionElms(sortClicks()[i][0]));
}
}
final();
//localStorage.clear();
$('ul.pull-left>li').on('click',function (e){
var clicks=parseInt(localStorage.getItem(this.id));
if(isNaN(clicks)){
clicks=0;
}
localStorage.setItem(this.id,clicks+1);
$('.user-actions').empty('.accordion-container');
final();
console.log(localStorage);
e.preventDefault();
});
});
Thanks alot, I had lost hope on this. and coming back to sitepoint 4days later. my hope is renewed. Thanks alot man.
Gracias
The javascript code isnt working, i am getting this error, $ is not defined
That sounds like you haven’t included the link to the jquery library above where you start asking for its routines?
I have this link added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.