jQuery .find() selects correct element but does not display it

Question

I wasn't sure exactly how to phrase this question, so here's the details:

This little thing I've written up here: https://jsfiddle.net/f8thL83r/1/ works great, as long as you only want to show elements in the top menu.

Click on anything under "Graphic Design", and it won't display anything in the pane to the right. Why is it working for the first category and not the second?

Here's some code. I know the way I've done this is probably awful, but I'm just beginning to find my feet with jQuery.

$('#Menu h3').click(function () {
            $("#Menu ul ul").slideUp();
            if (!$(this).next().is(":visible")) {
                $(this).next().slideDown();
            }
        });

        $('#Menu ul ul li a').click(function (e) {
            var $currPage;
            e.preventDefault();
            $lastPage.hide();
            var j = ($(this).parent().index()); //index of the li to show
            var i = $(this).parent().parent().parent().index(); //index of the ul to show
            $currPage = $('#ServMain .list' + i).find('.page' + j);

            $currPage.show();
            $lastPage = $currPage;
        });

I mean a ul that's inside another ul. That isn't what the problem is. That has nothing to do with what the problem is. Go look at the fiddle. — taki Martillo, Jun 24 '15 at 01:18
You should stay away from cross-references like `$lastPage.hide();` in `click()` method — MaxZoom, Jun 24 '15 at 01:18

score 1 · Answer 1 · answered Jun 24 '15 at 01:23

1

The problem is the ul.list is hidden

$('#Menu ul ul li a').click(function (e) {
    var $currPage;
    e.preventDefault();
    $lastPage.hide();
    var j = ($(this).parent().index());
    var i = $(this).parent().parent().parent().index();
    $('#ServMain > ul').not('.list'+i).hide();
    $currPage = $('#ServMain .list' + i).show().find('.page' + j);
    $currPage.show();
    $lastPage = $currPage;
});

Demo: Fiddle

answered Jun 24 '15 at 01:23

Arun P Johny

384,651
66
527
531

Well, that sure does explain it. I'll get the hang of this eventually. Muchas gracias. Strange thing, though, it isn't showing the first li in the second category. – taki Martillo Jun 24 '15 at 01:26

score 1 · Accepted Answer · answered Jun 24 '15 at 02:14

1

It seems other HTML elements of the selected page are not visible.
Below code should fix them

$('#Menu ul ul li a').click(function (e) {
    e.preventDefault();
    $lastPage.hide();
    var j = ($(this).parent().index());
    var i = $(this).parent().parent().parent().index();
    $('#ServMain ul').not('.list'+i).hide();
    $lastPage = $('#ServMain .list' + i).find('.page' + j);
    $lastPage.parent().show();
    $lastPage.show();
    $lastPage.find('div').show();
});

DEMO

answered Jun 24 '15 at 02:14

MaxZoom

7,619
5
28
44

Heh...yeah, I've worked it out so it does show all of the elements. I think what I really need to do is clean up that "onLoad" function at the beginning... there's just gotta be an easier way to do that... – taki Martillo Jun 24 '15 at 02:25
Yes, it would be easier if only key elements are hidden. Also should add `e.preventDefault();` in the`$('#Menu h3').click(` block to prevent hash showing up in the URL. – MaxZoom Jun 24 '15 at 02:27
After this, I'm going to have to find a way to make it so that when a user clicks on a navigation link in the actual nav menu, it'll bring them to this page, to this section, with their selection already opened up. I have a feeling that's going to be excruciatingly difficult considering my current design, but I don't even know. This is a real adventure for me. – taki Martillo Jun 24 '15 at 03:06
It should not be that difficult as you can set and read a [parameter](http://stackoverflow.com/a/21903119/4454454) in the page URL – MaxZoom Jun 24 '15 at 14:41

jQuery .find() selects correct element but does not display it

2 Answers2