Question

Fact: I’m not that good with jQuery.

Problem:

I have a form containing dynamically rendered radio buttons. When clicking on a radio button, I want a div to appear to give a text explanation. Within the “hidden” div I want a button or link to “close” the div. I have a set of 27 radio buttons, clicking on each WORKS perfectly fine it shows the proper div and I can click another radio button and it toggles to the next hidden div, except I can’t hide them after! But, I can hide the first radio button’s div, but I can’t hide any of the other 26, the button doesn’t do anything in those divs.

Here is the code for my radio buttons:

 $categoryQuery = "SELECT * FROM blah, blah";
 $categoryResult = mysqli_query($link, $categoryQuery );

                    while($row = mysqli_fetch_array($categoryResult)){

       $cat_id = $row['att_cat_id'];
       $category = $row['att_cat_name'];

 echo "<input type='radio' name='AttorneyCategory[]' value='$cat_id'> $category<br />";

Code for my hidden divs (created from my db):

 $categoryhelpQuery = "SELECT * FROM blah blah";
 $categoryhelpResult = mysqli_query($link, $categoryhelpQuery );

                    while($row = mysqli_fetch_array($categoryhelpResult)){

       $cat_id = $row['att_cat_id'];
       $category = $row['att_cat_name'];
       $category_description = $row['att_cat_description'];

 echo "<div id='blk-$cat_id' class='toHide'>";
 echo "<strong><em><center>Attorney Search Help Center</center></em></strong><button           id='hidr'>Hide</button><br />";
 echo "<strong>$category:</strong>&nbsp;&nbsp;$category_description";
 echo "</div>";

And here is my jQuery code:

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

  <script type="text/javascript">
 $(function() {
     $("[name='AttorneyCategory[]']").click(function(){
        $('.toHide').hide();
        $("#blk-"+$(this).val()).show();
     });


 });

  $("#hidr").click(function () {
  $('.toHide').hide(1000);
 });


 </script>

Any help would be great.

Answer 1

First thing: It looks like your

$("#hidr").click(function () {
$('.toHide').hide(1000);
});

is outside of your

$(function(){
   // this part
});

As I’m sure you know, jQuery runs everything inside that function AFTER the page is ready to be accessed. Right now I think jQuery is looking for “#hidr”s and not finding any because this code will run as soon as it possibly can. Likely before the browser has made any “#hidr”s

But wait! There’s more. Look closely at

 <button id='hidr'>Hide</button>

You’re using an id! 🙂 There’s only supposed to be one thing on your page with any given id. Try using class instead. That way you can attach the .click event to every $(“.hidr”)

Then, it’s only a matter of referencing the parent to make it all disappear. Like this:

 $(".hidr").click(function () {
   $(this).parent().hide(1000);
 });

Good luck with your lawyer page!