CODEWITHSUNDEEP
phpjqueryhtml
user3578487
user3578487

Reputation: 11

Hiding Forms and then showing on click on link issue

I'm trying to make a link called "advanced search section" for my website which will be will show additional options for my search which will be hidden until the user clicks on the advanced search link.

For some reason everything is already displayed. I've been trying this for a while and searching the web with no solution.

I'm fairly new to jquery so I'm not too sure if i am doing this right but here is my code:

index.php code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script>
$(function() {
    $('#filter').hide();
});

$('body').on('click','nav a', function(e) {
    $('#filter').show();
    $('#filter').children().hide();
    $($(this).attr('href')).show();
    e.preventDefault();
});​
</script>

</head>

<body>
<?php include_once("access_toppage.php"); ?>
<div id="middlepage">

    <div id="mainSearchArea">
        <form action="search.php" id="mainSearch" name="searchForm" method="POST">
            <input type="search" id="searchbar" placeholder="Search..." name="search">
            <select id"changes" name="change">
            <option value="">All Categories </option>
            <option value="Yatch">Yatch </option>
            <option value="Motor">Motor </option>
            <option value="Dingy">Dingy </option>
            <option value="Transport">Transport </option>
            <option value="Recreational">Recreational </option>

            </select>
            <input type="submit" id="go" value="Search">




    <nav>
        <a href="#filter">Advanced Search</a>
    </nav>
    <div id="filter">       
        <div id="city">
            <select id="city" name="city">
            <option value =""> All Cities</option>
            <option value="Dover">Dover </option>
            </select>
        </div>
    </div>

    </form>

css code :

.hide {
display:none;
}

#filter
{

}

Upvotes: 0

Views: 72

Answers (2)

tylerlindell
tylerlindell

Reputation: 1563

your css is 

.hide{
     display:none;
}

your link has an id of filter

#filter > * {
    display:none;
}

that will hide all of the children of the link.

then, I would move all of your jquery to the bottom of the page just after 

</body>

then start jquery with 

$(document).ready(function(){


//do stuff here

});
</html>

UPDATE:

jsfiddle

$(document).on('click', '#filter', function(){ 
    $(this).children().show(); 
});

Upvotes: 0

dklingman
dklingman

Reputation: 236

To be honest there isn't any reason why it wouldn't be hidden. However, I believe you may have a character at the end of your javascript code that you just can't see.

See my jsfiddle here. This was copied directly from what you have above. Notice the little red dot at the end of the code.

Now look at this fiddle here. Notice the red dot is gone and the drop down is hidden.

However, even with this code you'll never see the drop down when you click the link. I've modified the code in this fiddle here

$(document).ready(function () {
    $('#filter').hide();


    $('body').on('click', 'nav a', function (e) {
        e.preventDefault();
        $('#filter').toggle();
        //$('#filter').show();
        //$('#filter').children().hide();
        //$($(this).attr('href')).show();
    });
});

Upvotes: 1

Related Questions