Link to home
Create AccountLog in
Avatar of chrisj1963
chrisj1963

asked on

Show/hide div tags question

I am attempting to create a checkout flow using show/hide div tags and got some great help from an expert not too long ago.  I am struggling to understand how to add another layer of selection to my flow.

Here please see http://g3crm.com/expert/div5.htm

note that when you select the "male: an hit continue, you have two options.  i am not clear on the code to use to have the next selection bring me to the appropriate images for that model.

please see line 200 to 204 and line 222 to 226 where i inserted a div that i would like to appear if I select the 2nd (Model #2 image).

Can someone tell me what other changes I would need to make to the code to be able to have the result of the specific model show the divs that are appropriate for that model on the next page?

thanks,
<base href="http://www.g3crm.com/expert/">
<html><!-- http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23162154.html -->
<head>
<title>Multi-Page Form</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript">
var currentLayer = 'page1';
 
function showLayer(lyr){
  var theForm = document.weboptions;
    if(lyr!='page1')
                document.getElementById(lyr+"_gender").innerHTML = theForm.selectgender.value;
		if(lyr!='page1' && lyr!='page2')
                document.getElementById(lyr+"_model").innerHTML = theForm.selectmodel.value;
		if(lyr!='page1' && lyr!='page2' && lyr!='page3')
                document.getElementById(lyr+"_shot").innerHTML = theForm.selectshot.value;
		if(lyr!='page1' && lyr!='page2' && lyr!='page3')
                document.getElementById(lyr+"_shotsize").innerHTML = theForm.selectshotsize.value;
		if(lyr!='page1' && lyr!='page2' && lyr!='page3' && lyr!='page4')
                document.getElementById(lyr+"_plength").innerHTML = document.weboptions.selectplength.value;
		if(lyr!='page1' && lyr!='page2' && lyr!='page3' && lyr!='page4' && lyr!='page5')
                document.getElementById(lyr+"_script").innerHTML = document.weboptions.selectscript.value;
                				
<!-- if the selectgender value = "Male" + Model then show the 'MaleModel' Div otherwise if "Female" show 'FemaleModel' div -->
    document.getElementById('MaleModel').style.display='none'
    document.getElementById('FemaleModel').style.display='none'
    document.getElementById(theForm.selectgender.value+'Model').style.display='block'
 
<!-- if the selectgender value = "Male" + Shot then show the 'MaleShot' Div otherwise if "Female" show 'FemaleShot' div -->
    document.getElementById('MaleShot').style.display='none'
    document.getElementById('FemaleShot').style.display='none'
    document.getElementById(theForm.selectgender.value+'Shot').style.display='block'
 
<!-- if the selectgender value = "Male" + ShotSize then show the 'MaleShotSize' Div otherwise if "Female" show 'FemaleShotSize' div -->
    document.getElementById('MaleShotSize').style.display='none'
    document.getElementById('FemaleShotSize').style.display='none'
    document.getElementById(theForm.selectgender.value+'ShotSize').style.display='block'
	
<!-- if the selectgender value = "Male" + selectshot = Long then show the 'MalelongShot' Div etc.... -->
    document.getElementById('FemaleLongShot').style.display='none'
    document.getElementById('FemaleMediumShot').style.display='none'
    document.getElementById('FemaleHeadShot').style.display='none'
    document.getElementById('MaleLongShot').style.display='none'
    document.getElementById('MaleMediumShot').style.display='none'
    document.getElementById('MaleHeadShot').style.display='none'
//   alert("43: "+theForm.selectgender.value+theForm.selectshot.value+'Shot');
    document.getElementById(theForm.selectgender.value+theForm.selectshot.value+'Shot').style.display='block'
 
    hideLayer(currentLayer);
    document.getElementById(lyr).style.display = 'block';
    currentLayer = lyr;
    
}
 
function hideLayer(lyr){
        document.getElementById(lyr).style.display = 'none';
}
</script>
 
<!--Begin code to replace radio button with image select with box -->
   <script type="text/javascript">
function selectgenderfunc(text) {
  document.getElementById("selectgender" + document.getElementById("selectgender").value).style.border = "2px solid white";
  document.getElementById("selectgender" + text).style.border = "2px dotted #ffcc00";
  document.getElementById("selectgender").value = text;
}
 
function selectmodelfunc(text) {
  document.getElementById("selectmodel" + document.getElementById("selectmodel").value).style.border = "2px solid white";
  document.getElementById("selectmodel" + text).style.border = "2px dotted #ffcc00";
  document.getElementById("selectmodel").value = text;
}
 
function selectshotfunc(text,gender) {
  //hide current shotzize
  document.getElementById(document.getElementById("page3_gender").innerHTML + document.getElementById("selectshot").value+"Shot").style.display="none";
 
  //display shotsize corresponding to selected shot
  document.getElementById(document.getElementById("page3_gender").innerHTML + text+"Shot").style.display="";
 
  //update values for shot field
  document.getElementById("selectshot" + document.getElementById("selectshot").value).style.border = "2px solid white";
  document.getElementById("selectshot" + text).style.border = "2px dotted #ffcc00";
  document.getElementById("selectshot").value = text;
 
	if(gender)
	{
		var c = gender.parentNode.getElementsByTagName("img");
		for( i=0, limit = c.length; i <limit ; ++i)
		{
			c[i].style.border = "2px solid white";
		}
		gender.style.border = "2px dotted #ffcc00";
	}
 
}
 
function selectshotsizefunc(text,gender) {
  document.getElementById("selectshotsize" + document.getElementById("selectshotsize").value).style.border = "2px solid white";
  document.getElementById("selectshotsize" + text).style.border = "2px dotted #ffcc00";
  document.getElementById("selectshotsize").value = text;
	if(gender)
	{
		var c = gender.parentNode.getElementsByTagName("img");
		for( i=0, limit = c.length; i <limit ; ++i)
		{
			c[i].style.border = "2px solid white";
		}
		gender.style.border = "2px dotted #ffcc00";
	}
}
</script>
 
	 
<!--End code to replace radio button with image select with box -->
 
 
<style>
body{
        font: 10pt sans-serif;
        margin: 0px;
}
.page{
        position: relative;
        text-align:center;
        display:none;
}
</style>
</head>
 
<body>
 
<BODY>
<TABLE borderColor=#000000 height="100%" cellSpacing=0 cellPadding=6 
width="100%" bgColor=#d7dbe2 border=0>
  <TBODY>
  <TR>
    <TD vAlign=top>
      <CENTER><!-- Inner table for header, footer and content table, centered in main table-->
     <TABLE borderColor=#52555e height="100%" cellSpacing=0 cellPadding=0 
      width=650 bgColor=#ffffff border=0 style="background-image: url('header_footer_images/twm_11.gif')">
        <TBODY>
        <TR>
          <TD vAlign=top><IMG alt="Back to MainPage" 
            src="images/twm_01.gif" border=0> </TD></TR>
        <TR>
           <TD vAlign="top" style="background-image: url('header_footer_images/twm_11.gif')">
            <CENTER><BR><!-- 2nd Inner table for main content, centered in 1st inner table  -->
            <TABLE cellSpacing=2 cellPadding=2 width=600 border=0>
              <TBODY>
              <TR>
 
 
 
<a href="#"  onclick="if (showValues(document.forms[0]) ) document.forms[0].submit(); return false">send variables to sigup page</a>
  
<!-- Begin Page 1-->
<form id="multiForm" name="weboptions" method="POST" action="http://www.go2huddle.com/member/signup.php" onSubmit="return showValues(this)">
<input type="text" id="selectgender" name="gender" value="Male" />
<input type="text" id="selectmodel" name="model" value="Male_1" />
<input type="text" id="selectshot" name="shot" value="Long" />
<input type="text" id="selectshotsize" name="shotsize" value="LongLarge" />
 			<br>
<div id="page1" class="page" style="display:block">
   <label><img src="images/gender/gender_male.gif" id="selectgenderMale" style="border: 2px solid white;" onClick="selectgenderfunc('Male')" /></label>
   <label><img src="images/gender/gender_female.gif" id="selectgenderFemale" style="border: 2px solid white;" onClick="selectgenderfunc('Female')" /></label>
   <p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>
<!-- End Page 1-->
 
 
<!-- Begin Page 2-->
<div id="page2" class="page">
  <p id="page2_gender"></p>
  <div id="MaleModel" style="display:none">
   <label>Model 1<img src="images/model/male_model_1/model.gif" id="selectmodelMale_1" style="border: 2px solid white;" onClick="selectmodelfunc('Male_1')" /></label>
   <label>Model 2<img src="images/model/male_model_2/model.gif" id="selectmodelMale_2" style="border: 2px solid white;" onClick="selectmodelfunc('Male_2')" /></label>
  </div>
  <div id="FemaleModel" style="display:none">
   <label>Model 1<img src="images/model/female_model_1/model.gif" id="selectmodelFemale_1" style="border: 2px solid white;" onClick="selectmodelfunc('Female_1')" /></label>
   <label>Model 2<img src="images/model/female_model_2/model.gif" id="selectmodelFemale_2" style="border: 2px solid white;" onClick="selectmodelfunc('Female_2')" /></label>
  </div>
   
  <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></p>
 </div>
<!-- End Page 2-->
 
 
<!-- Begin Page 3-->
<div id="page3" class="page">  
  <p id="page3_gender"></p>
  <p id="page3_model"></p>
 <!--Page 3 Shot Selection--> 
  <div id="MaleShot" style="display:none">
    <label>Long <img src="images/model/male_model_1/shot/shot_long.gif" id="selectshotLong" style="border: 2px solid white;" onClick="selectshotfunc('Long');" /></label>
    <label>Medium <img src="images/model/male_model_1/shot/shot_medium.gif" id="selectshotMedium" style="border: 2px solid white;" onClick="selectshotfunc('Medium')" /></label>
    <label>Head <img src="images/model/male_model_1/shot/shot_head.gif" id="selectshotHead" style="border: 2px solid white;" onClick="selectshotfunc('Head')" /></label>
  </div>
  <div id="Male2Shot" style="display:none">
    <label>Long Model 2<img src="images/model/male_model_2/shot/shot_long.gif" id="selectshotLong" style="border: 2px solid white;" onClick="selectshotfunc('Long');" /></label>
    <label>Medium Model 2<img src="images/model/male_model_2/shot/shot_medium.gif" id="selectshotMedium" style="border: 2px solid white;" onClick="selectshotfunc('Medium')" /></label>
    <label>Head Model 2<img src="images/model/male_model_2/shot/shot_head.gif" id="selectshotHead" style="border: 2px solid white;" onClick="selectshotfunc('Head')" /></label>
  </div>
  
  <div id="FemaleShot" style="display:none">
    <label>Long</label> <img src="images/model/female_model_1/shot/shot_long.gif" id="selectshotLong" style="border: 2px solid white;" onClick="selectshotfunc('Long',this)" />
    <label>Medium</label> <img src="images/model/female_model_1/shot/shot_medium.gif" id="selectshotMedium" style="border: 2px solid white;" onClick="selectshotfunc('Medium',this)" />
    <label>Head</label> <img src="images/model/female_model_1/shot/shot_head.gif" id="selectshotHead" style="border: 2px solid white;" onClick="selectshotfunc('Head',this)" />
  </div>
 
<!--End Page 3 Shot Selection-->
<!--Page 3 Shot Selection LONG-->
<!-- If the selected gender is "Male" then "ShotSize" is added to it and the "MaleShotSize" Div shows-->
    <div id="MaleShotSize" style="display:none">
    <div id="MaleLongShot" style="display:none">
    <label>Long: Large <img src="images/model/male_model_1/size/shot_long_size_large.gif" id="selectshotsizeLongLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('LongLarge')" /></label>
    <label>Long: Medium <img src="images/model/male_model_1/size/shot_long_size_medium.gif" id="selectshotsizeLongMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('LongMedium')" /></label>
    <label>Long: Small <img src="images/model/male_model_1/size/shot_long_size_small.gif" id="selectshotsizeLongSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('LongSmall')" /></label>
    </div>
    
    <div id="MaleMediumShot" style="display:none">
    <label>Medium: Large <img src="images/model/male_model_1/size/shot_medium_size_large.gif" id="selectshotsizeMediumLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumLarge')" /></label>
    <label>Medium: Medium <img src="images/model/male_model_1/size/shot_medium_size_medium.gif" id="selectshotsizeMediumMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumMedium')" /></label>
    <label>Medium: Small <img src="images/model/male_model_1/size/shot_medium_size_small.gif" id="selectshotsizeMediumSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumSmall')" /></label>
    </div>
    
    <div id="MaleHeadShot" style="display:none">
    <label>Head: Large <img src="images/model/male_model_1/size/shot_head_size_large.gif" id="selectshotsizeHeadLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadLarge')" /></label>
    <label>Head: Medium <img src="images/model/male_model_1/size/shot_head_size_medium.gif" id="selectshotsizeHeadMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadMedium')" /></label>
    <label>Head: Small <img src="images/model/male_model_1/size/shot_head_size_small.gif" id="selectshotsizeHeadSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadSmall')" /></label>
    </div>
    </div>
 
    <div id="FemaleShotSize" style="display:none">
    <div id="FemaleLongShot" style="display:none">
    <label>Long: Large</label> <img src="images/model/female_model_1/size/shot_long_size_large.gif" id="selectshotsizeLongLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('LongLarge',this)" />
    <label>Long: Medium</label> <img src="images/model/female_model_1/size/shot_long_size_medium.gif" id="selectshotsizeLongMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('LongMedium',this)" />
    <label>Long: Small</label> <img src="images/model/female_model_1/size/shot_long_size_small.gif" id="selectshotsizeLongSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('LongSmall',this)" />
    </div>
    
    <div id="FemaleMediumShot" style="display:none">
    <label>Medium: Large</label> <img src="images/model/female_model_1/size/shot_medium_size_large.gif" id="selectshotsizeMediumLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumLarge',this)" />
    <label>Medium: Medium</label> <img src="images/model/female_model_1/size/shot_medium_size_medium.gif" id="selectshotsizeMediumMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumMedium',this)" />
    <label>Medium: Small</label> <img src="images/model/female_model_1/size/shot_medium_size_small.gif" id="selectshotsizeMediumSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumSmall',this)" />
    </div>
    
    <div id="FemaleHeadShot" style="display:none">
    <label>Head: Large</label> <img src="images/model/female_model_1/size/shot_head_size_large.gif" id="selectshotsizeHeadLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadLarge',this)" />
    <label>Head: Medium</label> <img src="images/model/female_model_1/size/shot_head_size_medium.gif" id="selectshotsizeHeadMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadMedium',this)" />
    <label>Head: Small</label> <img src="images/model/female_model_1/size/shot_head_size_small.gif" id="selectshotsizeHeadSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadSmall',this)" />
    </div>
    </div>
 
 
  <p><input type="button" id="B2" value="Go Back" onClick="showLayer('page2')"><input type="button" id="C3" value="Continue" onClick="showLayer('page4')"></p>
 
</div>
 
 
<!-- Begin Page 4-->
<div id="page4" class="page">
  <p id="page4_gender"></p>
  <p id="page4_model"></p>
  <p id="page4_shot"></p>
  <p id="page4_shotsize"></p>
  <p>Question 16 <input type="text" id="T16" size="20"></p>
  <p>Question 17 <input type="text" id="T17" size="20"></p>
  <p>Question 18 <input type="text" id="T18" size="20"></p>
  <p>Question 19 <input type="text" id="T19" size="20"></p>
  <p>Question 20 <input type="text" id="T20" size="20"></p>
  <p><input type="button" id="B3" value="Go Back" onClick="showLayer('page3')"><input type="submit" value="Submit" id="submit"></p>
</div>
 
<!-- End Page 4-->
 
</form>
 
        </TD></TR></TBODY></TABLE><!-- END of 2nd Inner table for main content, centered in 1st inner table  --><BR><BR><BR></CENTER></TD></TR>
        <TR>
  <TD vAlign="top" style="background-image: url('header_footer_images/twm_11.gif')">
            <CENTER><!-- Table with Footer Links, legal and support -->
            <TABLE cellSpacing=15 align=center border=0 width=650 bgColor=#ffffff border=0 style="background-image: url('header_footer_images/twm_11.gif')">
              <TBODY>
              
              <TR>
                <TD>&nbsp;&nbsp;&nbsp;&nbsp;<A class=legal-menu 
                  href="http://g3crm.com/support/" 
                  target=_blank>Support</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/imprint.htm" 
                  target=_blank>Imprint</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/privacy_policy.htm" 
                  target=_blank>Privacy Policy</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/TERMS_AND%20_CONDITIONS_OF_USE.htm" 
                  target=_blank>Terms and Conditions of Use</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/earnings-disclaimer.htm" 
                  target=_blank>Earnings Disclaimer</A></TD></TR></TBODY></TABLE><!-- END of table with Footer Links, legal and support --></CENTER></TD></TR>
        <TR>
        <TR><TD vAlign=bottom><IMG src="header_footer_images/twm_13.gif" border=0></TD></TR>
 
        </TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE></BODY></HTML>

Open in new window

Avatar of Chorch
Chorch
Flag of Spain image

Hello,

I've been taking a look at your code.

What I've noticed is that at line 33 you have this:

document.getElementById(theForm.selectgender.value+'Shot').style.display='block' // line 33

and when selecting model1 or model2, the value sent is the selectgender, not selectmodel. Gender is either Male or Female, that's why you don't get the specific model divs to show.

   <label>Model 1<img src="images/model/male_model_1/model.gif" id="selectmodelMale_1" style="border: 2px solid white;" onClick="selectmodelfunc('Male_1')" /></label>
   <label>Model 2<img src="images/model/male_model_2/model.gif" id="selectmodelMale_2" style="border: 2px solid white;" onClick="selectmodelfunc('Male_2')" /></label>

You should at this point return the model value, to show or hide the divs, not the gender:

<div id="Male_1Shot" style="display:none"> // changed id value, line 195
...
<div id="Male_2Shot" style="display:none"> // changed id value, line 200
...
...


Avatar of chrisj1963
chrisj1963

ASKER

Hi thanks for looking at the code.  I am not sure that I fully understand your suggestion.

I changed
    document.getElementById('Male_1Shot').style.display='none'  //line 31
    document.getElementById('Male_2Shot').style.display='none' //line 32

and

 <div id="Male_1Shot" style="display:none"> //line 196
 <div id="Male_2Shot" style="display:none"> //line 201

but now when I click on the male model in the first page it will not progress to page 2.

can you confirm that i am doing what you are suggesting or actually change the code so i can see what you mean.

see result of changes.. http://g3crm.com/expert/div6.htm

thanks
Avatar of Pieter Marais
I really hope this isn't the problem, but line 25 through to 49 doesn't one have an ';' at the end of the line.
There is only one thing missing in your code, selectmodel instead of selectgender:

document.getElementById(theForm.selectmodel.value+'Shot').style.display='block' // line 34

this way you return the selected model value (Male_1, Male_2, etc).
thanks, but no that's not the issue.  I am just trying to add another level of div selection. The code is working right now see http://g3crm.com/expert/div5.htm .  I am just trying to create a layer that is specific to the selected model.  right now the result is the same set of shot and shotsize for (male)  model 1 and model 2.
i am not clear on how i should change the code to accommodate this.
Sorry, but I don't get you at all...

actually, if you apply the last change I posted, you will get what I think you want.

If Model1 is selected, you show:

  <div id="Male_1Shot" style="display:none">
etc
  </div>

If Model2 is selected, you show:

  <div id="Male_2Shot" style="display:none">
etc
  </div>

Maybe you are confused as images are the same in both models, e.g.:

http://g3crm.com/expert/images/model/male_model_1/shot/shot_head.gif
http://g3crm.com/expert/images/model/male_model_2/shot/shot_head.gif
Chorch - thank you. that works. one problem though; I no longer get the select box around the shot selection on page 3 while it still works for the same when selecting model one.
any ideas?
thanks
By the way... apply my last posted change to:

http://g3crm.com/expert/div6.htm
sorry chorch your comment 'I don't get you at all' was due to the fact that i was responding to EZfrags comment. while i was typing that you had responed to my reply to your solution.
yes...

you have to repeat these changes for the next selection options:

    document.getElementById(theForm.selectmodel.value+'ShotSize').style.display='block' // L39
    document.getElementById(theForm.selectgender.value+theForm.selectshot.value+'Shot').style.display='block' // L49

and create independent divs for each model:

    <div id="Male_1LongShot" style="display:none">...
    <div id="Male_2LongShot" style="display:none">...


Chorch,
i replaced lines 39 and 49 with the code you provided.
Next i created the following divs  in lines 217 - 271 but now i cannot click continue when selecting "male" on page one.  Can you tell me what i have done wrong?

see  http://g3crm.com/expert/div8.htm

thanks,

    <div id="Male_1LongShot" style="display:none">
    <label>Long: Large <img src="images/model/male_model_1/size/shot_long_size_large.gif" id="selectshotsizeLongLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('LongLarge')" /></label>
    <label>Long: Medium <img src="images/model/male_model_1/size/shot_long_size_medium.gif" id="selectshotsizeLongMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('LongMedium')" /></label>
    <label>Long: Small <img src="images/model/male_model_1/size/shot_long_size_small.gif" id="selectshotsizeLongSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('LongSmall')" /></label>
    </div>
   
    <div id="Male_2LongShot" style="display:none">
    <label>Long: Large <img src="images/model/male_model_1/size/shot_long_size_large.gif" id="selectshotsizeLongLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('LongLarge')" /></label>
    <label>Long: Medium <img src="images/model/male_model_1/size/shot_long_size_medium.gif" id="selectshotsizeLongMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('LongMedium')" /></label>
    <label>Long: Small <img src="images/model/male_model_1/size/shot_long_size_small.gif" id="selectshotsizeLongSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('LongSmall')" /></label>
    </div>
   
    <div id="Male_1MediumShot" style="display:none">
    <label>Medium: Large <img src="images/model/male_model_1/size/shot_medium_size_large.gif" id="selectshotsizeMediumLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumLarge')" /></label>
    <label>Medium: Medium <img src="images/model/male_model_1/size/shot_medium_size_medium.gif" id="selectshotsizeMediumMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumMedium')" /></label>
    <label>Medium: Small <img src="images/model/male_model_1/size/shot_medium_size_small.gif" id="selectshotsizeMediumSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumSmall')" /></label>
    </div>
   
    <div id="Male_2MediumShot" style="display:none">
    <label>Medium: Large <img src="images/model/male_model_1/size/shot_medium_size_large.gif" id="selectshotsizeMediumLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumLarge')" /></label>
    <label>Medium: Medium <img src="images/model/male_model_1/size/shot_medium_size_medium.gif" id="selectshotsizeMediumMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumMedium')" /></label>
    <label>Medium: Small <img src="images/model/male_model_1/size/shot_medium_size_small.gif" id="selectshotsizeMediumSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('MediumSmall')" /></label>
    </div>
   
    <div id="Male_1HeadShot" style="display:none">
    <label>Head: Large <img src="images/model/male_model_1/size/shot_head_size_large.gif" id="selectshotsizeHeadLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadLarge')" /></label>
    <label>Head: Medium <img src="images/model/male_model_1/size/shot_head_size_medium.gif" id="selectshotsizeHeadMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadMedium')" /></label>
    <label>Head: Small <img src="images/model/male_model_1/size/shot_head_size_small.gif" id="selectshotsizeHeadSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadSmall')" /></label>
    </div>
   
    <div id="Male_2HeadShot" style="display:none">
    <label>Head: Large <img src="images/model/male_model_1/size/shot_head_size_large.gif" id="selectshotsizeHeadLarge" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadLarge')" /></label>
    <label>Head: Medium <img src="images/model/male_model_1/size/shot_head_size_medium.gif" id="selectshotsizeHeadMedium" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadMedium')" /></label>
    <label>Head: Small <img src="images/model/male_model_1/size/shot_head_size_small.gif" id="selectshotsizeHeadSmall" style="border: 2px solid white;" onClick="selectshotsizefunc('HeadSmall')" /></label>
    </div>
Here is the working code. I only made it work for Male_2... take a look at code, and you will be able to setup mode models easily.

Keep in mind that each Id must be unique, if not, there can be problems e.g. images not dotted.

On the other hand, there must be a lot of different divs:

gender1
   ->gender1model 1
        ->gender1model 1size1
            ->gender1model1size1head1
            ->gender1model1size1head2
            ->gender1model1size1head3
        ->gender1model 1size2
            ->gender1model1size2head1
            ->gender1model1size2head2
            ->gender1model1size2head3
        ->gender1model 1size3
            ->gender1model1size3head1
            ->gender1model1size3head2
            ->gender1model1size3head3

   ->gender1model 2
        ->gender1model 2size1
            ->gender1model2size1head1
            ->gender1model2size1head2
            ->gender1model2size1head3
        ->gender1model 2size2
            ->gender1model2size1head1
            ->gender1model2size1head2
            ->gender1model2size1head3
        ->gender1model 2size3
            ->gender1model2size1head1
            ->gender1model2size1head2
            ->gender1model2size1head3
ASKER CERTIFIED SOLUTION
Avatar of Chorch
Chorch
Flag of Spain image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
perfect. Thank you!