Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

Question

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

In my user interface, I have implemented three radio buttons labeled as "Easy," "Medium," and "Hard." Each button is assigned to a distinct Javascript function that manipulates the visibility of corresponding div elements. The main purpose behind this setup is to allow users to select an option and view the related content within the designated div.

Despite my efforts over the past week and thorough exploration of various suggestions on platforms like StackOverflow, I seem to be missing a crucial detail for the functionality to work seamlessly.

The HTML code for the radio buttons is structured as follows:

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

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

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

Below are the respective div elements that I intend to show/hide dynamically:

<td colspan="8" rowspan="12" align="center">
<div align="center" id="easyDIV"><img src="/images/pic1.jpg" alt="Image not loaded correctly." class="distort1" id="sample"/></div>

<div align="center" id="mediumDIV"><img src="/images/pic2.jpg" alt="Image not loaded correctly." class="distort2" id="sample1"/></div>

<div align="center" id="hardDIV"><img src="/images/pic3.jpg" alt="Image not loaded correctly." class="distort3" id="sample2"/></div>
</td>

Furthermore, I have included Javascript functions at the top of my page to dictate the visibility of each div element based on the selected radio button:

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

// Ensure mediumDIV is hidden
$("#mediumDIV").addClass("displaynone");
// Ensure hardDIV is hidden
$("#hardDIV").addClass("displaynone");
}

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

// Ensure easyDIV is hidden
$("#easyDIV").addClass("displaynone");
// Ensure hardDIV is hidden
$("#hardDIV").addClass("displaynone");
}

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

// Ensure easyDIV is hidden
$("#easyDIV").addClass("displaynone");
// Ensure mediumDIV is hidden
$("#mediumDIV").addClass("displaynone");
}
</script>

Although my initial intention was to display only the Medium div upon page load by triggering showMedium();, there seems to be a brief moment where all divs are visible before getting hidden. This creates a suboptimal user experience that I am keen on resolving.

I experimented with different techniques such as using the <div hidden> attribute or employing display:none in the style attribute of the divs, along with dynamic changes via Javascript. However, these approaches resulted in unexpected behavior where clicking on Easy or Hard radio buttons left empty spaces instead of displaying the intended div.

If anyone has insights or suggestions on achieving the desired functionality without the temporary display of all divs, I would greatly appreciate your guidance and assistance in optimizing this feature for a smoother user interaction. Thank you in advance for your help!

javascript jquery html css hidden

Answer 1

Answer №1

UPDATE

I have taken the liberty of creating a version that includes the plugin:

You can view it here: http://jsfiddle.net/9L0fvt9n/

Here are a few key points to note:

1) The plugin has been integrated into the fiddle, with your code located at the bottom of that section.

2) It is worth mentioning that the plugin you are utilizing is quite old. If you intend to continue using it, ensure that jQuery Migrate is also implemented on the page. You can find more information about jQuery Migrate here: https://github.com/jquery/jquery-migrate/#readme (simply import it alongside standard jQuery).

3) The issue stemmed from the internal code of the plugin. To rectify this, I replaced the method of hiding images from display:none to visibility:hidden. This adjustment is significant as display:none treats the element as though it never existed, while visibility:hidden hides the element but retains its space on the page.

4) Given that visibility:hidden results in blank spaces where the image would be located, I introduced a wrapper <div> (with class .container) and utilized CSS to stack all three images on top of each other. As only one image is displayed at a time, all images maintain their rightful positions (you can experiment with my demo by removing the new CSS styles to observe the impact).

Please let me know if this proves helpful!

I have prepared a JSFiddle demonstration of a solution for you. However, it's important to highlight that many of the techniques you're employing are now considered outdated and not recommended (for instance - Avoid using tables to present non-tabular data).

In my example, I have addressed some of these concerns:

You can access the demonstration here: http://jsfiddle.net/wxda5yoq/

Upon initial page load, the CSS settings have been configured to exclusively display the designated div element.

Subsequently, additional div elements are dynamically shown or hidden based on the radio button selection. The primary event handler is elaborated below:

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

  //Then display the image div we want to see
  //To determine this, we extract the id of the current radio button
  var radioID = $(this).attr('id');

  //Finally, we reveal the corresponding image div
  $('#' + radioID + 'DIV').css('display','block');
});

Feel free to reach out if you require further clarification :)

Answer 2

UPDATE

I have taken the liberty of creating a version that includes the plugin:

You can view it here: http://jsfiddle.net/9L0fvt9n/

Here are a few key points to note:

1) The plugin has been integrated into the fiddle, with your code located at the bottom of that section.

2) It is worth mentioning that the plugin you are utilizing is quite old. If you intend to continue using it, ensure that jQuery Migrate is also implemented on the page. You can find more information about jQuery Migrate here: https://github.com/jquery/jquery-migrate/#readme (simply import it alongside standard jQuery).

3) The issue stemmed from the internal code of the plugin. To rectify this, I replaced the method of hiding images from display:none to visibility:hidden. This adjustment is significant as display:none treats the element as though it never existed, while visibility:hidden hides the element but retains its space on the page.

4) Given that visibility:hidden results in blank spaces where the image would be located, I introduced a wrapper <div> (with class .container) and utilized CSS to stack all three images on top of each other. As only one image is displayed at a time, all images maintain their rightful positions (you can experiment with my demo by removing the new CSS styles to observe the impact).

Please let me know if this proves helpful!

I have prepared a JSFiddle demonstration of a solution for you. However, it's important to highlight that many of the techniques you're employing are now considered outdated and not recommended (for instance - Avoid using tables to present non-tabular data).

In my example, I have addressed some of these concerns:

You can access the demonstration here: http://jsfiddle.net/wxda5yoq/

Upon initial page load, the CSS settings have been configured to exclusively display the designated div element.

Subsequently, additional div elements are dynamically shown or hidden based on the radio button selection. The primary event handler is elaborated below:

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

  //Then display the image div we want to see
  //To determine this, we extract the id of the current radio button
  var radioID = $(this).attr('id');

  //Finally, we reveal the corresponding image div
  $('#' + radioID + 'DIV').css('display','block');
});

Feel free to reach out if you require further clarification :)

Answer 3

Answer №2

To hide certain classes from the start, add the displaynone class to them, as your JavaScript will reset the class for all relevant divs when executed.

For instance:

<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 may also consider removing the code that triggers displayMedium() on page load.

Answer 4

To hide certain classes from the start, add the displaynone class to them, as your JavaScript will reset the class for all relevant divs when executed.

For instance:

<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 may also consider removing the code that triggers displayMedium() on page load.

Answer 5

Answer №3

One approach to consider is implementing a logic that checks if the radio button has been clicked (if true), then proceed to toggle other classes accordingly.

To retrieve the input values, you can refer to:

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

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

Answer 6

One approach to consider is implementing a logic that checks if the radio button has been clicked (if true), then proceed to toggle other classes accordingly.

To retrieve the input values, you can refer to:

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

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

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to distinguish elements in the same HTML using Angular Material?

Issue encountered when attempting to insert data via node into MySQL database

Steps to update the value of an object stored within an array

Express application encountering an issue when trying to render a live chart with flot in the Jade client

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

Attempting to incorporate icons into a Material UI table design

Guide to implementing an $http post service with defer and promise in AngularJS

Troubleshooting: Unable to execute a jQuery search in the database after applying accent-neutralization in datatables

Is there a way to automatically load an entire Facebook profile in one go using a program?

Can a form be submitted using an Ajax request triggered by a div element instead of an input type submit?

Use jQuery to redirect the user if the URL does not match

Use ajax, javascript, and php to insert information into a database

the components progress down the line

Updating a URL for all users using React/Next.js and Firebase: a guide to refreshing the page

Tips for centering Font Awesome icons in your design:

Limit the display of an element to a single occurrence by utilizing jQuery cookies

Searching for a file in Mongoose using an array field of IDs

Updating input values dynamically using AJAX in Laravel 6

When the page loads, a JavaScript function is triggered

Trouble persisting values with Heroku due to variable issues