0

Hello, I have 2 functions that I wrote to show a hidden div, I would love to convert this to jquery but unsure how. Also, I want a function that will allow me to change the onclick function to open and close and show an arrow > and arrow down... when I open it...

here are my 2 functions that open and close the div..

    <script type="text/javascript">
    function hideMe()
    {
    document.getElementById('filter').style.display="none" ;
    }
    </script>
    <script type="text/javascript">
    function showMe()
    {
    document.getElementById('filter').style.display="block" ;
    }
    </script>

and my div that i want the onclick function to open and close by clicking on filter and default is close..

           <fieldset>
           <legend style="cursor:pointer;" onClick="return showMe();">Filter</legend>
           <div id="filter" style="display:none">
           <div style="float:right" id="closefilter"><a style="cursor:pointer" onClick="return hideMe();" ><img src="xsmall.png" alt="Close" title="Close Filter List"></a></div>
           <a class="checkall" href="#" > Check All</a> <a class="uncheckall" href="#"> Uncheck All</a><br>
            <label><input name="filter" id="check-box2" type="checkbox" value="Pending"><font size="-1" style="background:#FF6262">Pending</font></label>
            <label><input name="filter" id="check-box3" type="checkbox" value="Complete"><font size="-1" style="background:#7BCC70">Complete</font></label><br>
            <label><input name="filter" id="check-box" type="checkbox" value="Waiting for parts"><font size="-1" style="background:#ffff66">Waiting for parts</font></label>
            <label><input name="filter"  id="check-box4" type="checkbox" value="Waiting for customer response"><font size="-1" style="background:#e4d2ba">Waiting for customer response</font></label>
            </div>
            </fieldset>
1
Contributor
1
Reply
10
Views
4 Years
Discussion Span
Last Post by patk570
0

I found this and Iam using it...It works the best..

<script type="text/javascript">
$(document).ready(function() {
    $('#mainfilter').toggle(
        function() {
            $('#filter').show("slow");
        },
        function() {
            $('#filter').hide( "slow" );
        }
    );
});
    </script>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.