How to align <li> to the top when higher items are hidden via CSS

I have an <ul> to do a menu bar. The bar is vertical on the left of my screen. When an option is selected out of the first visible section, I will use JS to hide the first block and set the remaining blocks to .show()

on the next chunk based on the option selected. Now, I have no problem with the JS portion of this. My problem is - when I .hide() and .show() the <li> groups, they stay as if the others were present (large gaps in between options vs top aligned).

Here is a sample of my list:

<ul class="menu">
    <li><a id="mainSuit" href="javascript: void(0)">Suit</a></li>
    <li><a id="mainFinances" href="javascript: void(0)">Finances</a></li>
    <li><a id="mainMissions" href="javascript: void(0)">Missions</a></li>
    <li><a id="mainTerritory" href="javascript: void(0)">Territory</a></li>
    <li><a id="mainCompany" href="javascript: void(0)">Company</a></li>
    <li><a id="mainTravel" href="javascript: void(0)">Travel</a></li>
</ul>

<!-- More <ul> between the two -->

<ul class="menu">
    <li><a id="suitLoadout">Loadout</a></li>
    <li><a id="suitEquipment">Equipment Market</a></li>
    <li><a id="suitMunitions">Munitions Surplus</a></li>
    <li><a id="suitRefuel">Refuel</a></li>
    <li><a id="suitRepair">Repair</a></li>
</ul>

For CSS

#suitRepair {
    display: none;
}

/* same for all of the IDs */

So when id mainSuit is selected - all of <ul class="menu"> will be hidden and the section for suit is shown.

How would I get it so that any gaps for UL blocks between these too are removed.

Answers


UPDATED

Even better - use the <ul> as the identifier and go that route:

<ul id="mainMenu">
    <li id="mainSuit"><a onclick="mainSuit()" href="javascript: void(0)">Suit</a></li>
</ul>
<ul id="suitMenu">
    <li id="suitLoadout"><a>Loadout</a></li>
    <li id="suitEquipment"><a>Equipment Market</a></li>
    <li id="suitMunitions"><a>Munitions Surplus</a></li>
    <li id="suitRefuel"><a>Refuel</a></li>
    <li id="suitRepair"><a>Repair</a></li>
</ul>

With JS of:

function backSelected() {
    $("#mainMenu").show();
    $("#suitMenu").hide();
}
function mainSuit() {
    $("#mainMenu").hide();
    $("#suitMenu").show();
}

Just try specify the id on < li > instead < a >:

<li><a id="suitLoadout">Loadout</a></li>

will be:

<li id="suitLoadout"><a>Loadout</a></li>

Now you will hide the < li > tag not the content of that tag, so the space gap will be solved ;)


Need Your Help

How to populate a jTable from an ArrayList?

java swing arraylist jtable

The program is meant to take the user input and store it in an arraylist. Then the user can print the details onto the jtable. After, he can remove an item from the jtable by selecting a row.

How to deep learn from a row of numbers using Node.js and convnetjs and predicted a new value?

javascript node.js deep-learning

I try to to use convnetjs to make Node.js learn from a row of numbers in x,y coordiinates. The goal is to predicted next value in a simple number row.