Member Avatar for patk570

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
  • 233 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by patk570

Dani AI

Generated

— good call using jQuery. The pattern you found works, but it uses the old toggle(handler, handler) event helper (it was deprecated/removed in newer jQuery). A cleaner, unobtrusive and accessible approach is to use a real control (a button or a focusable legend), slideToggle for the panel animation, and update an aria-expanded state plus a small caret character so screen readers and keyboard users are covered.

Example HTML/CSS (keeps markup minimal and semantic):

<fieldset>
  <legend>
    <button id="filterToggle" type="button" aria-expanded="false">
      <span class="caret">></span> Filter
    </button>
  </legend>

  <div id="filterPanel" style="display:none;">
    <!-- filter inputs go here -->
  </div>
</fieldset>

<style>
button { background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.caret { margin-right:6px; }
</style>

Example jQuery (unobtrusive, updates caret + ARIA, avoids animation queue buildup):

$(function(){
  var $btn = $('#filterToggle');
  var $panel = $('#filterPanel');

  $btn.on('click', function(){
    $panel.stop(true,true).slideToggle(180);
    var expanded = $btn.attr('aria-expanded') === 'true';
    $btn.attr('aria-expanded', String(!expanded));
    $btn.find('.caret').text(expanded ? '>' : 'v');
  });
});

Troubleshooting and notes: load jQuery before this script, make sure selectors match your markup, and use event delegation if the toggle is added dynamically. If you must keep the legend as the clickable element, make it focusable and add role="button" tabindex="0" so keyboard users can reach it; otherwise a button is simplest and most semantic. This approach modernizes the snippet you found while adding keyboard/ARIA support and avoiding deprecated APIs.

Member Avatar for patk570

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.