JavaScript - Show And Hide In Javascript

Hi,

I have been developing a show/hide feature on my companies web site for some time. I have so much code as to where I am confused when I need to add another slide function.

I have provided the URL below to the page where the code exists.

http://www.pjm.com/markets-and-opera...assistant.aspx

This is where I get lost with the huge amount of code that I have.

If you take a look under the second slider named "Electricity Markets" there is another slider underneath named "Energy Market". I need to add three more sliders right underneath in the same format under "Energy Market"

If anyone can assists with this that would be great. I should have organized the code a lot better, so now I get lost within the code now.

BTW, the show/hide feature really does not display well in Firefox, please try in IE.

Thanks!

Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code:

Code:

            
HTML
           <div >
                <div id="showhide">
                    Line 1
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 2
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 3
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 4
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 5
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 6
                </div>
            </div>
 
Javascript:
<script>
	function mover(){
document.getElementById("visiblediv").style.display="block"
	}
	function mout() {		
document.getElementById("visiblediv").style.display="none"
	}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>			

CSS:
#visiblediv {
	visibility:visible;
	border:1px dotted black;
}

Any ideas, as to why it's not working?

Hi everyone,

I'm new here, I actually found this site by searching for the code I have a question for.

I'm trying to show/hide different drop down selectors, depending on what is chosen in another drop down selector. I modified a script (I found he http://www.codingforums.com/showthread.php?t=98406) in a way that I thought would work, but its not. Can anyone help me with what I'm doing wrong?

Here is my page: http://www.leatherexpressonline.com/...er/testing.php

Here is my javascript: http://pastie.org/3344253

And my drop downs: http://pastie.org/3344258

Also, I don't want the drop downs (ids: grade1000color, grade1500color, grade2000color, grade2500color, grade3000color, grade5000color) to be shown when the page is first loaded. Only when the correct option is chosen on the drop down. So I'm guessing I should add a display:none style to those drop downs, then have them shown on the javascript?

Thanks so much for the help

Is there any way to make a link show if javascript is being used to hide it?

This is the javascript code that is hiding the link:

Code:

<a href="javascript:void(0)" class="show-hide-link action-link">

As you can see the above warning will be only shown when there is an error while inserting the data into the login form.
Now I have tried to achieve it by:

Hiding the div say "warning". Use a javascript while submitting the form to check for input validation. If found any error, the hidden div "warning" will show above the form as shown as in the image.


I have tried it in Edit fiddle - JSFiddle

Ples help

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>


This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Hi Guys,

I have a PHP loop region, which repeats all completed projects for each customer, then displays all jobsheets linked to those projects.
I have a javascript show/hide function, which will only show the jobsheets when the project link is clicked.
Without this javascript, the PHP loop works perfectly, but all the information is displayed. How can I use the show/hide function and still show all the jobsheets for completed projects?
Code:

function toggle2(id, link) {
  var e = document.getElementById(id);
 
  if (e.style.display == '') {
    e.style.display = 'none';
    link.innerHTML = '<img src="../Images/plus.gif" border="0" >';
  } else {
    e.style.display = '';
    link.innerHTML = '<img src="../Images/minus.gif" border="0" >';
  }
}

PHP Code:
<table>
<tr>
<th>Project / Job</th>
<th>Language</th>
<th>Words (Net)</th>
<th>Shipped</th>
</tr>

<?php
$previousProject = '';
if ($totalRows_rsComplete_Cust > 0) {
// Show if recordset not empty
while ($row_rsComplete_Cust = mysql_fetch_assoc($rsComplete_Cust)) {
if ($previousProject != $row_rsComplete_Cust['projid']) {
// for every user, show the user name
?>

<tr>
<td colspan="4"><a href="#" onclick="toggle2('<?php echo $row_rsComplete_Cust['projid']; ?>', this)"><img src="../Images/plus.gif" border="0" /></a><?php echo $row_rsComplete_Cust['projid']; ?></td>
</tr>

<?php $previousProject = $row_rsComplete_Cust['projid']; } ?>

<tr id="<?php echo $row_rsComplete_Cust['projid']; ?>" style="display:none">
<td><a href="jobsheet_details.php?id=<?php echo $row_rsComplete_Cust['jobid']; ?>&amp;proj=<?php echo $row_rsComplete_Cust['projid']; ?>"><?php echo $row_rsComplete_Cust['jobname']; ?></a></td>
<td>LANGUAGE</td>
<td>WORD NET</td>
<td>YES / NO</td>
</tr>  

<?php }} // Show if recordset not empty ?>

</table>

Hello,

Could anyone help me? I'm looking for a script that remembers, re-sets, and can set to the previous
state the show or hide behavior of a layer upon return to the page.

I have an image gallery that's in 3 categories: wedding, bridal shower and save-the-dates. When viewing an image in the bridal shower or save-the date galleries and I press on the link I created titled "Back to Gallery" it does not return me back to the Bridal Shower or Save-the-dates gallery (whichever I'm in) it returns me to the main Invitations gallery page. So bascially I'm looking for a script that will write to a cookie what layers are shown and what are hidden so when you return it reads the cookie and displays the last layers you had showing before leaving the page.

Hello everyone,

I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called 'pMenuMain'. The second and third have names 'pMenu2' and 'pMenu3'. The 4th level is found by its <a> tags, because all of those are links.

This is the JavaScript I need to change somehow:

Code:

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 1000;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('.pMenu2').hover(jsddm_open, jsddm_timer)
   $('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});

document.onclick = jsddm_close;
</script>

Now this is the CSS style sheet:

Code:

/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:21%;
}

.pMenu {
    margin:0;
    padding:0;
    list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul ul li{
    width:100%;
    display:inline-block;
}

/*begin main list attributes*/
ul.pMenu > li:hover{
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}

ul.pMenu > li{
    float:left;
    list-style:none;
	margin-right:1%;
	display:block;
    color:#FFF;
    background:#900;
    border:.33em ridge #C30;
    text-decoration:none;
}

.pMenuMain{
    text-shadow:1px 1px 1px #000;
    white-space:nowrap;
    padding-top:.7em;
    padding-bottom:.7em;
	text-align:center;
}

/*first sub-list*/
ul.pMenu li li{
	margin-right:0;
}

ul.pMenu ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

.pMenu2{
	background:#CCC;
	border:.25em outset #999;
	width:10em;
	font-size:12px;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}

.pMenu2:hover{
    background:#999;
    border:.25em inset #666;
    text-decoration:blink;
}

/*second sub-list*/
ul.pMenu ul ul{
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    display:none;
}

.pMenu3{
	background:#999;
	border:.25em outset #666;
	width:13em;
	font-size:11px;
	padding-top:.35em;
	padding-bottom:.35em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}
ul.pMenu ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:.15em outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul a:hover {
    background:#999;
    border:.15em inset #666;
    text-decoration:blink;
}

/*third sub-list*/
ul.pMenu ul ul ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

ul.pMenu ul ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:1% outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul li a:hover {
    background:#999;
    border:1% inset #666;
    text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/

This is how it's set up in HTML:

Code:

<!-- begin Personal navigation menu -->
<div class="pWrapper">
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">health</div>
    		<ul style="left:18em;">
        		<li><div class="pMenu2">weight loss</div>
            		<ul>
               		  <li><div class="pMenu3">fitness</div>
                			<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
                    	<li><div class="pMenu3">dieting</div>
                    		<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
            		</ul>
            	</li>   
            	<li><div class="pMenu2">skin care</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:14%;"><div class="pMenuMain">insurance</div>
    		<ul>
        		<li><div class="pMenu2">property insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">auto insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">health insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">annuities</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       	   </ul>
   	   </li>
	</ul>

	<ul class="pMenu">
		<li style="width:11.3%;"><div class="pMenuMain">general</div>
    		<ul>
        		<li><div class="pMenu2">electronics</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">style &amp; fashion</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">food/dining</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">cars/auto</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       		</ul>
   	    </li>
	</ul>
                   
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">dating</div>
    		<ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:13.8%;"><div class="pMenuMain">education</div>
    		<ul>
        		<li><div class="pMenu2"><a href="#">under construction</a></div></li>
        	</ul>
    	</li>
	</ul>                    	
</div>
	<!-- end Personal navigation menu-->

I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href="#"> can be clicked, resetting the menu. This is a flaw in functionality.

Code:

<html>
<title> random!!</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="one" style="cursor: pointer;">
type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div>
<div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div>

<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('div.twotwo').hide();
$('div.threethree').hide(); 
$('div.one').toggle(function() 
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.oneone').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 

$('div.two').toggle(function() 
{
$('div.oneone').hide();
$('div.threethree').hide();
$('div.twotwo').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 

$('div.three').toggle(function() 
{
$('div.twotwo').hide();
$('div.oneone').hide();
$('div.threethree').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 
});
</script>
</body>
</html>

The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!!

Hi,

I've created a gallery with multiple slideshows; each of them show/hide when you click on their corresponding link. The first slideshow appears when the page loads, but the others are hidden with a div style.

It works great in most browsers, except Internet Explorer . For some reason, IE only shows part of the slideshows; the whole iframe is there, but only a small portion of the photos appear (although the slideshow itself also continue to run fine).

I realized that the problem is the div style (style="display:none; ). When I remove it from all the slideshows, then they appear fully instead of partially in Internet Explorer. However, the purpose of hiding them is defeated, as they all show up at once when the page loads. I want to keep them all hidden until you click on their respective link to show them.

The page can be viewed he www.raynemakerimages.com/galleries.html
Firefox shows how it should display....

Anyway, I'm looking for a relatively easy fix for this....help is appreciated.

Thanks.

Coding:

Code:

<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ShowContent(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>

The hide/show links:
Code:

<div align="center" class="class1">

<a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
      <span class="class1">Family      </span></a> 

| 

<a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Artistic       </a> 
| 

<a href="javascript:ShowContent('intimate'), HideContent('family'), HideContent('artistic'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Intimate       </a> 

| 

<a href="javascript:ShowContent('maternity'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Maternity      </a> 
| 

<a href="javascript:ShowContent('newborns'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('miscellaneous')" class="style1 style32">Newborns      </a> 
| 

<a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32">
        Miscellaneous</a><a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"></a>       

</div>

The slideshows:

Quote:
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image: url(images/bg3.jpg)">
<tr>
<td>
<div id="family">
<p align="center"><span class="style33">Family Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563240423&tags=Family" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="intimate" style="display:none;"><p align="center"><span class="style33">Intimate Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563795631&tags=Intimate" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td >
<div id="artistic" style="display:none;"><p align="center"><span class="style33">Artistic Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563696337&tags=Artistic" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="maternity" style="display:none;"><p align="center"><span class="style33">Maternity Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996323&tags=Maternity" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="newborns" style="display:none;"><p align="center"><span class="style33">Newborns Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996817&tags=Newborns" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="miscellaneous" style="display:none;"><p align="center"><span class="style33">Miscellaneous Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625689475348&tags=Miscellaneous" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
</table>

Hello
I am new at Javascript.
Please help me this:
I have a form and a checkbox:

Code:

<input  name="pass" type="password" class="textfield" />
<input  type="checkbox" class="check"> Click here to show/hide password

If I the checkbox is checked, it will show the password in the form, it means
Code:

<input  name="pass" class="textfield" />

if not, the input form is:
Code:

<input  name="pass" type="password" class="textfield" />

Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

Code:

<script type="text/javascript">
function showstuff(element){
        if(document.getElementById(element).style.display = 'block')
                  {
                        document.getElementById(have).style.visibility="block";
                        document.getElementById(look).style.visibility="none";
                  }
        else if(document.getElementById(element).style.visibility = 'block')
                  {
                        document.getElementById(look).style.visibility="block";
                        document.getElementById(have).style.visibility="none";
                  }
}
</script>

<select name="type" onchange="showstuff(this.value);">
          <option value="look">Look</option>
          <option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>

Hi all,

Check this code:
PHP Code:
<a>text</a>
<div id="pkg">pkg</div>
<div id="table_pkg">table_pkg</div> 


I'd like to show table_pkg and hide pkg when I click on <a>text</a>.
How can I do?

Thank you very much

Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome

I have a script to show and hide various divs based on a function & var.

The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want.

here is the JS:

Code:

function sitesurveyswitch(emotion) {

	var e = emotion;

	document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
	document.getElementById('FeedbackHate').style.display = 'none';
	document.getElementById('FeedbackOk').style.display = 'none';
	document.getElementById('FeedbackLove').style.display = 'none';
		
	if (e == 'hate')
		document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackHate').style.display = 'block';
	if (e == 'ok')
		document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackOk').style.display = 'block';
	if (e == 'love')
		document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackLove').style.display = 'block';
}

and here is the code related to this function:

Code:

<div id="siteSurveyBox">
				<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
				<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
				<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
			</div>
			
			<div id="FeedbackHate" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackOk" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackLove" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>