Hide DIVs while page loads, then show them when Radio Buttons are pressed

Question

I have 3 radio buttons, they’re called “Easy” “Medium” and “Hard”. Each one is linked to a separate Javascript function. These functions show one div while hiding two other divs.

The purpose of this is for the user to be able to choose an option and see the div for that option, for example, if they press the “Easy” radio button then the “Easy” div should be shown, and the “Medium” and “Hard” divs should be hidden.

I’ve been trying to get this to work for a week now and I think I’ve tried every related suggestion on stackoverflow, but I hope there’s just something small that I’m missing.

These are the radio buttons in my HTML:

<td width="100"><div align="center" class="radio">
<input type="radio" name='thing' value='valuable' id="easy" onclick="showEasy()"/></div>
</td>

<td width="100"><div align="center" class="radio">
<input type="radio" name='thing' value='valuable' id="medium" onclick="showMedium()"/></div>
</td>

<td width="100"><div align="center" class="radio">
<input type="radio" name='thing' value='valuable' id="hard" onclick="showHard()"/></div>
</td>

These are the DIVs I want to show/hide:

<td colspan="8" rowspan="12" align="center">
<div align="center" id="easyDIV"><img src="/images/pic1.jpg" alt="If you can see this, then the image didn't load properly." class="distort1" id="sample"/></div>

<div align="center" id="mediumDIV"><img src="/images/pic2.jpg" alt="If you can see this, then the image didn't load properly." class="distort2" id="sample1"/></div>

<div align="center" id="hardDIV"><img src="/images/pic3.jpg" alt="If you can see this, then the image didn't load properly." class="distort3" id="sample2"/></div>
</td>

And this is the script I have at the top of my page, each function should show one DIV at a time:

<script>
function showEasy()
{
$("#easyDIV").removeClass("displaynone");

//Make sure mediumDIV is not visible
$("#mediumDIV").addClass("displaynone");
//Make sure hardDIV is not visible
$("#hardDIV").addClass("displaynone");
}

function showMedium()
{
$("#mediumDIV").removeClass("displaynone");

//Make sure easyDIV is not visible
$("#easyDIV").addClass("displaynone");
//Make sure hardDIV is not visible
$("#hardDIV").addClass("displaynone");
}

function showHard()
{
$("#hardDIV").removeClass("displaynone");

//Make sure easyDIV is not visible
$("#easyDIV").addClass("displaynone");
//Make sure mediumDIV is not visible
$("#mediumDIV").addClass("displaynone");
}
</script>

I only want the Medium div to be shown at the start, so I have showMedium(); set to run once the page has finished loading, this successfully hides the Easy and Hard divs. The problem is that all 3 divs are visible for a second or two until every page element is finished loading. Once everything’s loaded, showMedium(); runs and the Easy and Hard divs get hidden.

This looks really bad to the user, so I’ve been trying to find a way to have these two divs hidden by default and just have the Medium div showing at the start.

I’ve tried several methods, I’ve tried hiding the two divs by setting their divs to <div hidden>

I’ve also tried hiding the two divs by setting their style to display:none like this:

<div align="center" id="easyDIV" style="display: none;"><img src="" alt="If you can see this, then the image didn't load properly." id="sample"/></div>

And then to show each div I tried changing this style to display: inline and display: block by including code to do that inside the Javascript function above.

These attempts didn’t work, the 2 divs were successfully hidden (because they didn’t appear when the page was loading) but whenever I tried clicking on the Easy or Hard radio buttons, while the Medium div disappeared correctly, it was replaced by an empty space, meaning the Easy and Hard divs were still hidden.

I can’t work out how to get this working, it seems like the only way I can have the radio buttons working successfully and showing/hiding the correct divs, is to have all 3 load/appear on screen for a second or two while the page loads. I’d really appreciate any advice on getting this to work the way I’d like it to. I’ll try any suggestions and thank you in advance for your help!

Answer 1

UPDATE

I've created a version with the plugin included:

http://jsfiddle.net/9L0fvt9n/

A couple of notes:

1) I've included the plugin in the fiddle, your code is at the bottom of that section.

2) The plugin you're using is very old...if you need to use it make sure you also use jQuery Migrate on the page: https://github.com/jquery/jquery-migrate/#readme (just import it along with regular jQuery).

3) The issue was being caused by the plugin's internal code. To resolve it, instead of hiding the images using display:none, I used visibility:hidden. This is different because whereas display:none renders the page as though the element was never there to begin with, visibility:hidden hides the element, but it will still take up its space on the page.

4) Because visibility:hidden leaves blank spaces on the page where the image would have been, I added a wrapper <div> (with a class of .container) and used CSS to place all three images on top of each other. Since only one image is displayed at a time, all images are in the expected position (you can play around with my demo by removing my new CSS styles and see the effects).

Let me know if it helps!

---

I've created a JSFiddle demo of a solution but you should know that many of the techniques you're using are now out-of-date and not best practice (For example - Never use tables to display non-tabular information).

In my example, I've corrected a few of these:

http://jsfiddle.net/wxda5yoq/

When the page initially loads, I've set the CSS to only display the desired div element.

After that, new div elements are dynamically displayed and hidden based on the radio button selection. The main even handler is:

$('.radio input').on('click', function(){
  //Hide all image divs
  $imageDivs.css('display','none');

  //Then display the image div we want to see
  //To find that out we'll get the id of the current radio button
  var radioID = $(this).attr('id');

  //And then we'll display that image div
  $('#' + radioID + 'DIV').css('display','block');
});

Let me know if this answers your question :)

Answer 2

Apply the displaynone class to the classes you don't want to be shown from the beginning, since all your javascript completely resets the class for all the divs in question when run.

Example:

<td colspan="8" rowspan="12" align="center">
<div align="center" id="easyDIV" class="displaynone"><img src="" alt="If you can see this, then the image didn't load properly." id="sample"/></div>

<div align="center" id="mediumDIV"><img src="" alt="If you can see this, then the image didn't load properly." id="sample1"/></div>

<div align="center" id="hardDIV" class="displaynone"><img src="" alt="If you can see this, then the image didn't load properly." id="sample2"/></div>
</td>

You could even then remove the code running displayMedium() on page load.

Answer 3

Also it might be faster to write some logic to test is the radio button clicked(if returned true) then toggle the other classes.

Getting the value of input per:

https://stackoverflow.com/a/23053203/4812515

var easy = $('easy:checked').val(),
medium = $('medium:checked').va(),
hard$('hard').val();


if(this.radiobutton == true){
medium.toggleClass(); }
else{
toggle some more classes
}