Home/ Questions/Q 8538475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:07:38+00:00

I actually didn’t really know how to phrase the question title, but here is

  • 0

I actually didn’t really know how to phrase the question title, but here is the description. Suppose I’m using jQuery to show/hide uls that are stacked on top of each other (absolutely positioned). For example:

<ul id="one">
  <li>blah</li>
  <li>blah2</li>
</ul>

<ul id="two">
  <li>blah</li>
  <li>blah2</li>
</ul>

I have a controller button, that when pressed, simply changes the z-index of these uls. The controller button is literally just:

<a href="#" id="mybutton">My button</a>

With jQuery code that does: (I’m using the jQuery cycle plugin)

$('#mybutton').click(function() { 
  // check which ul is currently shown
  // change z-index, so that the next ul is to be shown
});

THE QUESTION:

In my site, I have several pages that I would like to point to the second ul, so that when clicked, it’ll bring them to the page with all of the uls, but only the second one will be shown. It would be the same if the person went to the page, had the default first ul shown, and then clicked “next” to proceed to the next ul. I am simply wondering if it’s possible to avoid pressing “next”, and just bring the user directly to the page and have the second ul shown.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you can use the hash-tag from the URL. You can then write an if statement like this:

     if(location.hash === "#2"){
     $("#one").hide();
 }else{
     $("#two").hide();
 }

    Or directly as a copy and paste example:

    <html>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    if(location.hash === "#2"){
        $("#one").hide();
    }else{
        $("#two").hide();
    }
    $('#mybutton').click(function(e) { 
        $("ul").toggle(); //quick n dirty! only works with 2 lists :)
        e.preventDefault();
    });
});
</script>
<body>
<a href="#" id="mybutton">My button</a>

<ul id="one">
  <li>First Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<ul id="two">
  <li>Second Item!</li>
  <li>blah</li>
  <li>blah2</li>
</ul>

<a href="#2">To second page (you might have to refresh, notice the #2 at the end of the url!)</a>
​</body>
</html>

    Also notice I’ve inserted a e.preventDefault(); at #mybutton‘s click listener to prevent the URL changing back on clicking.

    • 0