CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zsophia Norris
Zsophia Norris

Reputation: 5

Have a specific nested UL element open upon page load

Here's the JSFiddle

I've created a very simple "archive tree" that uses nested ULs and LIs to browse through years, months and days. Currently, I have one problem that I'd like to solve:

If you click any of the day links that lead to another page, I'd like for the whole thing to stay open to that month. (For example, like having an "active" class for a navbar element, only in this case, the UL element would display as a block on the new page for that month, as if it had been opened previously. I have tried adding a separate class to display as a block, but it does not change (see JSFiddle).

.month-active {
    display: block;
}

<ul class="archive_year">
    <li class="year-button"><button class="navbutton">key5</button>
        <ul class="archive_month">
            <li class="month-button"><button class="navbuttoninner">key53</button>
                <ul class="archive_dayList month-active">
                    <li class="archive_day"><a href="#">Test link</a></li>
                    <li class="archive_day"><a href="#">Test link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 0

Views: 59

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You can add a data attribute to each link, then set a localStorage item with the value for the last link clicked. And on page load, if the localStorage item is set, show that element and traverse back up the DOM and show the parents, too.

Since this won't work in the sandbox on SO, here's a fiddle. https://jsfiddle.net/pppL1rwx/4/

if (localStorage.lastClicked) {
  $('[data-id="' + localStorage.lastClicked + '"]').parentsUntil('.parent').each(function() {
    $(this).siblings().addBack().slideDown();
  });
}

$('.year-button, .month-button').click(function(e) {
  e.stopPropagation();
  $(this).children('ul').slideToggle();
  var clicked = e.target.getAttribute('data-id');
  if (clicked) {
    localStorage.lastClicked = clicked;
  }
});
.navbutton {
  -webkit-appearance: none;
  background-color: #cfa9db;
  border: none;
  color: white;
  padding: 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100%;
  font-weight: bold;
  transition: all 0.2s ease 0s;
}

.navbuttoninner {
  -webkit-appearance: none;
  background-color: #cfa9db;
  border: none;
  color: white;
  padding: 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 290px;
  font-weight: bold;
  transition: all 0.2s ease 0s;
}

.archive_year {
  font-size: large;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

.archive_month {
  list-style: none;
  font-weight: normal;
  cursor: pointer;
}

.archive_dayList {
  margin-left: 32px;
  list-style: none;
  font-weight: normal;
  cursor: pointer;
}

.month-button {
  padding-top: 6px;
}

.archive_day {
  padding-top: 6px;
}

.archive_month,
.archive_dayList {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <ul class="archive_year">
    <li class="year-button">
      <button class="navbutton">2017</button>
      <ul class="archive_month">
        <li class="month-button">
          <button class="navbuttoninner">June</button>
          <ul class="archive_dayList">
            <li class="archive_day"><a href="#" data-id="link1">Test link</a></li>
            <li class="archive_day"><a href="#" data-id="link2">Test link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="archive_month">
        <li class="month-button">
          <button class="navbuttoninner">July</button>
          <ul class="archive_dayList">
            <li class="archive_day"><a href="#" data-id="link3">Test link</a></li>
            <li class="archive_day"><a href="#" data-id="link4">Test link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions