Databases
StackOverflow2013
Postsdbo
POjQuery with Wordpress menus - how to hide submenu on page load
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery with Wordpress menus - how to hide submenu on page load
    primarykey
    data
    text
    <p>I have a simple Wordpress theme with a sidebar menu containing main menu items and sub menu items. The menu appears on all pages. This is how the menu renders:</p> <pre><code>&lt;li id="menu-item-55" class="menu-item "&gt;&lt;a href="?page_id=22"&gt;Main Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-120" class="menu-item "&gt;&lt;a href="#"&gt;Main Menu Item 2&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li id="menu-item-119" class="menu-item"&gt;&lt;a href="?page_id=101"&gt;Sub Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-118" class="menu-item"&gt;&lt;a href="?page_id=104"&gt;Sub Menu Item 2&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-117" class="menu-item"&gt;&lt;a href="?page_id=109"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="menu-item-53" class="menu-item "&gt;&lt;a href="?page_id=26"&gt;Main Menu Item 3/a&gt;&lt;/li&gt; </code></pre> <p>I am using a simple bit of jQuery to toggle the submenu items:</p> <pre><code> $(document).ready(function() { $("#menu-item-120").click(function() { $('.sub-menu').slideToggle('medium'); }); }); </code></pre> <p>This is basically fine for my requirements with one small problem - I need to have the sub-menus initially hidden when a page loads. Using jQuery to hide the menu items when the page has loaded causes the menus to briefly display, which is not acceptable.</p> <p>To add to the problem, ideally, the submenus should always display if one of the subpages is being displayed. I'm happy to hard code in ids etc just to get things working, and would be grateful for any hints.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USChristian Mayne
    1. USChristian Mayne
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCan't you just hide your sub-menus using CSS {display:none} and display them using Jquery? Try http://api.jquery.com/slideDown
      singulars
      1. POjQuery with Wordpress menus - how to hide submenu on page load
      1. USDejo Dekic
    2. COI think @DejoDekic's suggestion would fix the first problem. For the second part, what do you mean by "the submenus should always display if one of the subpages is hidden"?
      singulars
      1. POjQuery with Wordpress menus - how to hide submenu on page load
      1. USTJ-
    3. COThat works - thanks very much. I have edited my original problem to correct my stupid sentence - I meant to say "the submenus should always display if one of the subpages is being displayed"
      singulars
      1. POjQuery with Wordpress menus - how to hide submenu on page load
      1. USChristian Mayne
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload