Hidden division changed to Show when page reloaded

Posted on 2011-09-26
Medium Priority
Last Modified: 2012-05-12
I'm using this script to toggle the visibility on my page.

<script type="text/javascript">
	function toggleq6(evt) {
	evt = (evt) ? evt : event;
	var target = (evt.target) ? evt.target : evt.srcElement;
	var block = document.getElementById("q6Data");
	if (target.id == "q5Flag1") {
		block.style.display = "block";
	} else {
		block.style.display = "none";  

Open in new window

and this is the section it toggles:

<li>Did you utilize <b>past performance</b> or <b>other PDO writing</b> services on this proposal?  
<input type="radio" name="q5" id="q5Flag1" value="1" onclick="toggleq6(event)" <cfif url.q5 EQ 1>checked</cfif>> Yes 
<input type="radio" name="q5" id="q5Flag0"value="0" onclick="toggleq6(event)" <cfif url.q5 EQ 0>checked</cfif>> No</div>
<div id="q6Data" style="display:none; margin: 0 0 15px 0px">
<ol start="6">
<li>How would you rate your <b>overall experience</b> with <b>PDO's past performance or other writing services</b><br />on this proposal? <br />
<table cellpadding="0" cellspacing="0" class="noborder surveyQuestion">
    	<td><input type="radio" name="q6" value="-5" <cfif url.q6 EQ "-5">checked</cfif>/>-5&nbsp;</td>
    	<td><input type="radio" name="q6" value="-4" <cfif url.q6 EQ "-4">checked</cfif>/>-4&nbsp; </td>
    	<td><input type="radio" name="q6" value="-3" <cfif url.q6 EQ "-3">checked</cfif>/>-3&nbsp;</td>
    	<td><input type="radio" name="q6" value="-2" <cfif url.q6 EQ "-2">checked</cfif>/>-2&nbsp;</td>
    	<td><input type="radio" name="q6" value="-1" <cfif url.q6 EQ "-1">checked</cfif>/>-1&nbsp;</td>
    	<td><input type="radio" name="q6" value="0" <cfif url.q6 EQ "0">checked</cfif>/>0&nbsp;</td>       
    	<td><input type="radio" name="q6" value="+1" <cfif url.q6 EQ "+1">checked</cfif>/>+1&nbsp;</td>
    	<td><input type="radio" name="q6" value="+2" <cfif url.q6 EQ "+2">checked</cfif>/>+2&nbsp;</td>
    	<td><input type="radio" name="q6" value="+3" <cfif url.q6 EQ "+3">checked</cfif>/>+3&nbsp;</td>
    	<td><input type="radio" name="q6" value="+4" <cfif url.q6 EQ "+4">checked</cfif>/>+4&nbsp;</td>
    	<td><input type="radio" name="q6" value="+5" <cfif url.q6  EQ "+5">checked</cfif>/>+5&nbsp;</td>

Open in new window


When the user is returned to the page having selected yes to the toggle how can I have Q6 automatically showing?

I hope this makes sense!
Question by:traport
LVL 13

Accepted Solution

ansudhindra earned 2000 total points
ID: 36599837
try like this...

<cfif isdefined('form.q6') and trim(form.q6) neq "">
       <div id="q6Data" style="display:block; margin: 0 0 15px 0px">
       <div id="q6Data" style="display:none; margin: 0 0 15px 0px">

where "form.q6" -  if the form is submitted to istself and showing it to user
or replace with the proper variable name if you are loading the values from database..


Author Closing Comment

ID: 36600255
Thanks so much!

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

619 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question