CODEWITHSUNDEEP
jqueryshow-hide
o_O
o_O

Reputation: 5737

Jquery .hide not working as expected. No errors and blank console

I have a jQuery function inside .click and it does not work. I have tested the jQuery and it's working but have tried multiple combinations as tests inside the .click and things aren't working correctly for some reason. The console is blank and states there are no erros. It does say, however, that it can't find any of my defined variables...

html:

<body>
    <section id="container_header">
        <header>
            <nav>
                <a id="home">Home</a>
                <a id="about">About</a>
                <a id="work">Work</a>
                <a id="contact">Contact</a>
            </nav>
        </header>
    </section>
    <section id="container_content">
        <div class="section" id="section-home"></div>
        <div class="section" id="section-about"></div>
        <div class="section" id="section-work"></div>
        <div class="section" id="section-contact"></div>
    </section>

With CSS I am rendering the empty divs and they show properly. Now for the js:

        $(function(){
            $(this).click(function(){
                var pid = $(this).attr("id"); //console says this var is not defined???
                $(this).hide(); //even this does not work???
                //$("div[id^=section-]").hide(); //this works just fine???
                //$(this).closest("#container_header").hide(); //not working???
                //$(this).closest("body").find("#section-" + pid).show(); //no likey???
                //alert("h"); //works
            });
        });

Comments above describe things that work and things that doen't. It's probably something stupid but I can't see it. And yes, while testing I'm removing the comments before trying them.

Upvotes: 2

Views: 567

Answers (3)

IB&#39;s
IB&#39;s

Reputation: 1

You can remove all console logs by using the following:

if ( window.console && window.console.log ) {  console.clear(); }

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

Within a ready handler, this is bound to the document itself. Since you wrote:

$(function() {
    $(this).click(function() {  // Here, 'this' is 'document'.
        var pid = $(this).attr("id");
        $(this).hide();
    }
});

You're trying to fetch the id attribute of the document, which does not exist, then to hide the document itself, which cannot be achieved.

Try matching the <div> elements that expose the section class instead:

$(function() {
    $("div.section").click(function() {
        var pid = $(this).attr("id");
        $(this).hide();
    }
});

Upvotes: 2

xdazz
xdazz

Reputation: 160843

Maybe this is what you want, Your first this is in wrong use, it should be the a tag selector.

$(function() {
  $('#container_header a').click(function() {
    $('#container_content > div').hide();
    $('#section-'+this.id).show();
  });
});

Upvotes: 1

Related Questions