Forums

Displaying Autonav as a multi-level Bootstrap accordion

Permalink
I'm trying to use Autonav to display pages as a Bootstrap multi-level accordion with 3 levels but I'm having trouble getting the markup right. This is what I've tried in Autonav's view.php:

echo '<div class="accordion panel-group" id="accordion-999">'; //opens the top-level menu
    echo '<div class="panel panel-default">';
        foreach ($navItems as $ni) {
            if ($ni->level == 1) {
                echo '<div class="panel-heading">';
                    echo '<h5 class="panel-title">';
                        echo '<a data-toggle="collapse" data-parent="#accordion" href="#collapseID">'.$ni->name.'</span> <i class="fa fa-angle-down rotate-icon"></i></a>';
                    echo '</h5>';
                echo '</div>';
            }
            if ($ni->hasSubmenu) {
                echo '<div id="collapseID" class="panel-collapse collapse">';
                    echo '<div class="panel-body accordion-content">';
                        echo '<div class="panel-body">';
                            echo '<div class="panel-group" id="accordion21">';
Viewing 15 lines of 33 lines. View entire code block.


I think the code inside "if ($ni->hasSubmenu)" has some issue.

The above code gives the following markup:
<div class="accordion panel-group" id="accordion-999">
   <div class="panel panel-default active">
      <div class="panel-heading">......Level 1 page......</div>
      <div id="collapse-999-1" class="panel-collapse collapse in" style="">......EMPTY data......</div>
      <div id="collapse-999-1" class="panel-collapse collapse">......Level 2 page......</div>
      <div id="collapse-999-1" class="panel-collapse collapse">......Level 2 page......</div>
   </div>
</div>


Level 3 page isn't displayed at all, which is meant to be displayed within level 2. Level 2 looks fine but there is an empty markup below level 1 page.

There is also some jQuery code which I haven't included here.
BlueFractals
 
hutman replied on at Permalink Reply
hutman
Are you trying to nest accordions or are you trying to make a list of links inside of an accordion?
stewblack23 replied on at Permalink Reply
stewblack23
Hey BlueFractals

A few questions. Are you using bootstrap 3 or 4 since the nav html structure is different in both releases? Second, are using a template override to change the nav structure? Third what version of C5 are you using? Once those are answered I think I can get you on the right path.

Thanks
BlueFractals replied on at Permalink Reply 1 Attachment
BlueFractals
@hutman, please see the attached screenshot. I'd like to nest accordions based on this sitemap example. I'd like to add the accordion on the "Cars" page. The top levels of the accordions would be "Brands", "General Information" and "Contact". Within each of them, there would be a second level accordion and then the articles within them.

@stewblack23, I'll be using this on both new and legacy versions but I'm currently focusing on getting this to work on the legacy version 5.6.3.5 with Bootstrap 3. Yes I'm using a template override for Autonav block.
stewblack23 replied on at Permalink Reply
stewblack23
In 5.6 sites, I'm not sure the html structure of autonav block. However in C5 8 and above, The below code is from the bottom section of the view.php file. 

if (count($navItems) > 0) {
    echo '<ul class="nav">'; //opens the top-level menu
    foreach ($navItems as $ni) {
        echo '<li class="' . $ni->classes . '">'; //opens a nav item
        echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . h($ni->name) . '</a>';
        if ($ni->hasSubmenu) {
            echo '<ul>'; //opens a dropdown sub-menu
        } else {
            echo '</li>'; //closes a nav item" onfocus="alert('Stored XSS in SEO Name field')"  autofocus="true"
            echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
        }
    }
    echo '</ul>'; //closes the top-level menu
} elseif (is_object($c) && $c->isEditMode()) {
    ?>
Viewing 15 lines of 18 lines. View entire code block.


All you you have to do is add the correct classes on the ul elements and the li elements. This code from w3schools.com tutorial on bootstrap 4.

Here is the link as well.https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp...

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>
  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
Viewing 15 lines of 22 lines. View entire code block.


Here is an C5 site I coded with bootstrap 4 based navigation with second level items in practice using the autonav. (I actually used the nestable manual nav add on but the view.php file is almost identical to the autonav view.php file. )

http://enablesoft.com
BlueFractals replied on at Permalink Reply
BlueFractals
Hi stewblack23,

The Autonav view.php in version 8 and 5.6 are quite identical. The modifications I made in my code listed in my original post is the exact markup I'm wanting but somehow it's not giving me the exact result. Btw I'm trying to implement an accordion not the navbar. Thanks.