How to do UIKIT nav accordion always open? - php

Question

I make a sidebar with UIKIT Nav component.
http://getuikit.com/docs/nav.html
That could be able to make accordion like this.
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
parrent
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
current
</li>
<li>
not current
</li>
</ul>
</li>
</ul>
If I click accordion menu. Tag will change it.
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent uk-open" aria-expanded="true">
parent
<div style="overflow: hidden; position: relative;">
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
current
</li>
<li>
not current
</li>
</ul>
</div>
</li>
</ul>
If I do page reload, All accordion will close.
So what do I wanna ask you the question is how to always open when the request-url is current?
I wanna always open the parent ul tag that nest class uk-active li tag.
I think that will be able with jQuery or PHP.
any ideas?

Answer 1

I'm sorry to reply this too late.
Finally, I understand always open trigger is 'uk-active' class.
There are no relation with 'uk-open', aria-expanded="true" or div bla bla bla.
Just set 'uk-active' class on element you wanna always show it.
So, This is my solution.
http://codepen.io/qwe001/pen/JKgBBx
And ya, Need to use $_SERVER['REQUEST_URI'] to set uk-active class.
Btw, I use php framework Laravel5. So my code is like this.
<div class="uk-width-medium">
<div class="uk-panel uk-panel-box">
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent {{ Request::is('admin/parent1*') ? 'uk-active' : '' }}">
Parent 1 (Have Nest and Nest is current)
<ul class="uk-nav-sub uk-nav-side">
<li class="{{ Request::is('admin/parent1/nest1*') ? 'uk-active' : '' }}">
Nest 1 (current)
</li>
<li class="{{ Request::is('admin/parent1/nest2*') ? 'uk-active' : '' }}">
Nest 2 (not current)
</li>
<li class="{{ Request::is('admin/parent1/nest3*') ? 'uk-active' : '' }}">
Nest 3 (not current)
</li>
</ul>
</li>
<li class="{{ Request::is('admin/parent2*') ? 'uk-active' : '' }}">
Parent 2 (Not Nest)
</li>
<li class="uk-parent {{ Request::is('admin/parent3*') ? 'uk-active' : '' }}">
Parent 3 (Have Nest but Current nests are nothing)
<ul class="uk-nav-sub uk-nav-side">
<li class="{{ Request::is('admin/parent3/nest1*') ? 'uk-active' : '' }}">
Nest 1 (not current)
</li>
</ul>
</li>
</ul>
</div>
</div>
NOTE: Must need adjust parent uk-parent class color like this.
/* Adjust Parent Background Color */
.uk-nav-side > li.uk-parent.uk-active > a {
background: inherit;
color: inherit;
}
.uk-nav-side > li.uk-parent.uk-active > a:hover,
.uk-nav-side > li.uk-parent.uk-active > a:focus {
background: rgba(0, 0, 0, 0.05);
color: #444;
outline: none;
}
/* Adjust Parent Child Padding */
.uk-nav-side > li.uk-parent .uk-nav-side > li > a {
padding-left: 1em;
}
.uk-nav-side > li.uk-parent .uk-nav-side > li.uk-active > a:hover {
color: #FFF;
}

Answer 2

i dont know your another code, but a way is this:
Your url: index.php?id=2
<?php
$page = (isset($_GET['id']))?(int)$_GET['id']:'';
?>
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
parrent
<ul class="uk-nav-sub uk-nav-side">
<li class="<?=(($page==2)?'uk-active':'')?>">
current
</li>
<li>
not current
</li>
</ul>
</li>
</ul>
This code:
<?=(($page==2)?'uk-active':'')?>
is the short notation of this:
<?php
if($page == 2){
echo "uk-active";
}else{
echo "";
}