jquery hide problem

Question

Hello!

I use this to toggle my div elements, and hide all them when the DOM is ready...

   $('div[class*="showhide"]').hide();

   $('input:image').click( function() {
      var nr = $(this).attr('id').substr(7,2);
      $('div.showhide' + nr).toggle(400);
   });

I have dinamically created div elements with class showhide0;showhide1;showhide2...etc... Inside the DIV tags i have search boxes.

• first when page is loaded all DIV tags hide...
• i toggle one of them to shown
• start a search, so the page is reload with the result of query..

Of course all DIV is hide again, 'coz the page is reloaded. Unfortunatelly...

Is it possible to not hide again after i searched something? It would be nice when i open the page, all DIV are hide, but after then just when i toggle it....

Thank you for all advise..

Answer 1

Well, yeah, you just don't run the initial hide() if there's a search request. I'd just exclude that line from the output if, on the PHP level, you know you're executing a search.

Answer 2

If you need a specific element or elements to stay visible upon a page reload, then you're going to need to do something to maintain state across requests, and then modify your jQuery to utilize that state information when initializing the visible state of the elements.

This can be done in numerous ways which include but are not necessarily limited to

• Include it in the query string
• Include it in the URL hash
• Use a cookie

Answer 3

We do something similar to this where I work.

We opted instead of have the class name just be hide for all elements and instead have the ids named.

So, we'd have it something like:

<div id="hide1" class="hide"> </div>

along with this CSS to hide all those divs by default

.hide {
    display: none;
}

Finally, we use something like this to show them:

$('input:image').click( function() {
   var nr = $(this).attr('id').substr(7,2);
      $('#hide' + nr).toggle(400);
   });
}

This works because of CSS precedence rules. The toggle()/hide()/show() method overrides the hide class's style.

As for the unhiding part, if you pass the ID to unhide to your script, you can parse it and unhide the appropriate div.

You can read and process the query string from window.location.search. Unfortunately, you then have to manually parse it or use a plugin, such as jQuery Query String Object or jQuery URL Utils.

var id = $.query.get('unhide_id'); // This is using Query String Object
$('#' + id).show(400);

Answer 4

I try with query string object...but something wrong..

The Php/html part for example is following:

  for($i=0;ik<3;$i++) {
  echo "<div id='test$i' class='showhide$i'><form name='set_search_".$i."' id='set_search_".$i."' action='settings.php' method='get'>....................</div }

The JS part is:

$('div[class*="showhide"]').hide(); // this hide all when page is loaded...

   var id = $.query.get( 'test1' ); // this two line should shown DIV with ID test1
   $('#' + id).show();  // but did not shown.


   $('input:image').click( function() {   // and then toggle function went wrong too...
     var nr = $(this).attr('id').substr(7,2);
          $('div.showhide' + nr).toggle(400);
   });

If i replace this line $('#' + id).show(); to this $('#test1').show(); then ok.. So something wrong with query.get line.

The second problem that, DIV IDs created dinamically, so in query.get line i have to use someting masking procudure 'coz the ID is not static.

  query.get('test*') <---- i dont know how...

I hope u could help... Tnx.