0

Overview

I have a navbar with li elements. I add the class active to the element that corresponds to a variable $page.

For each of the list elements, I place code similar to this:

<li<?= $page=="new" ? " class='active'" : null ?>><a href="<?= $rootUrl ?>?page=new">New event</a></li>

That way, using this example, if the $page is "new", I add the active class to the li element.

This works with top-level list items as well as dropdown children.

Issue

I want the parent element of the dropdown children to also show the active class when one of its children is active.

To do this with a dropdown with page values "new", "existing" and "gateway", I use:

<li class="dropdown<?= $page=="new"||$page=="existing"||$page="gateway" ? " active" : null ?>">

However, this doesn't work; when inspecting the element in the Chrome developer tools, the only class is dropdown1 and any other added classes have disappeared.

Adding the active class manually in Chrome developer tools produces the correct result.

Full code

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li<?= $page=="dashboard" ? " class='active'" : null ?>><a href="<?= $rootUrl ?>?page=dashboard">Dashboard</a></li>
        <li class="dropdown<?= $page=="new"||$page=="existing"||$page="gateway" ? " active" : null ?>">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Events <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li<?= $page=="new" ? " class='active'" : null ?>><a href="<?= $rootUrl ?>?page=new">New event</a></li>
                <li<?= $page=="existing" ? " class='active'" : null ?>><a href="<?= $rootUrl ?>?page=existing">Existing events</a></li>
                <li<?= $page=="gateway" ? " class='active'" : null ?>><a href="<?= $rootUrl ?>?page=gateway">Gateway</a></li>
            </ul>
        </li>
        <li><a href="<?= $rootUrl ?>?logout=true">Sign out</a></li>
    </ul>
</div>

Question

How can I make the parent element of the dropdown have active class when one of its child elements has the active class?

Ben
  • 8,894
  • 7
  • 44
  • 80
  • tried var_dump($page) to see what value it has ? – IseNgaRt Mar 04 '16 at 12:28
  • @IseNgaRt Yes, it has the correct values. I can see this because the correct child element has the `active` class – Ben Mar 04 '16 at 12:29
  • $page="gateway" ? u miss a "=" here btw – IseNgaRt Mar 04 '16 at 12:31
  • @IseNgaRt And you've found the solution. Thank you. Post it as an answer and I'll accept! – Ben Mar 04 '16 at 12:32
  • Dont use = its very bad practice because it is not a php default. Also use a function to detect the active state something like you can put in the echo into the function. As @IseNgaRt stated you just made a human mistake by missing a equal sign and to avoid these kind of mistakes use functions. To do repetitiv tasks. – Hans Koch Mar 04 '16 at 12:47

1 Answers1

1

You are missing a "=" at $page="gateway" should be $page=="gateway"

<li class="dropdown<?= $page=="new"||$page=="existing"||$page="gateway" ? " active" : null ?>">
IseNgaRt
  • 601
  • 1
  • 4
  • 22