Home/ Questions/Q 4587868
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T21:50:30+00:00

My goal is to build a script that will reveal different paragraphs on a

  • 0

My goal is to build a script that will reveal different paragraphs on a page, depending on the radio button that is clicked.
The first stage is to build a script that will simply reveal one piece text when one of the buttons is clicked.
From reading about this it appears that you should be able to identify which button is clicked by using the ID of the input element and ‘checked. Note that I’m anticipating relying on the ID’s so that I know which text to reveal.
However, the following code is not working and being a neophyte I’m struggling to see what’s missing. Note that for what seems a simpler approach at the beginning I’m showing the text on the page and then want the text to hide when the button is clicked.

The script is

<script type="text/javascript">
    $(document).ready(function() {
    if($('input:checked #category1')) {
        $("#hideCategory1").hide();
            };
        });

The input section is:

      <form name="categories" action="" method="post">
  <h2>Categories
  </h2>
  <p><input name="category" type="radio" value="errorInText" id="category1" />Content</p>
  <p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p>
  <p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p>
  </form>

CSS is

#hideCategory1 {
visibility: visible;

}

Text Section is

<p id="hideCategory1" class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

I’d appreciate any pointers on why this might be failing and how to correct it.

Note that when I started this I was anticipating using “change” to detect which button was clicked. However, I read in several places that the “change” function sometimes has problems with IE – but I don’t know.

Thanks

UPDATE:
Based on Edgar’s response I reversed the process and added one more line that resets all the text to hidden when a radio button is clicked. Initial tests show this to be working as expected.

$(document).ready(function() {
  $("#hideCategory1, #hideCategory2, #hideCategory3").hide(); //Hide all forms
$(":radio[name='category']").click(function(){
  $("#hideCategory1, #hideCategory2, #hideCategory3").hide();//on click rehide all the forms
   switch($(this).attr("id")){//Select the form based on the radio button that was clicked.
      case "category1": $("#hideCategory1").show(); break;
      case "category2": $("#hideCategory2").show(); break;
      case "category3": $("#hideCategory3").show(); break;
   }
 });
});

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I didn’t understand if you want to show or hide the paragraphs. Anyway, this code hides the paragraph corresponding to the radiobutton clicked. Here you have:

    <html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
   $(":radio[name='category']").click(function(){
       $("#hideCategory1, #hideCategory2, #hideCategory3").show(); //Show all paragraphs first.
       switch($(this).attr("id")){
          case "category1": $("#hideCategory1").hide(); break;
          case "category2": $("#hideCategory2").hide(); break;
          case "category3": $("#hideCategory3").hide(); break;        
       }
   });
});
</script>

<form name="categories" action="" method="post">
  <h2>Categories
  </h2>
  <p><input name="category" type="radio" value="errorInText" id="category1" />Content</p>
  <p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p>
  <p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p>
</form>
  <p id="hideCategory1"> Paragraph 1 </p>
  <p id="hideCategory2"> Paragraph 2 </p>
  <p id="hideCategory3"> Paragraph 3 </p>
</body>
</html>

    Hope this helps. Cheers

    • 0