2 Replies - 1156 Views - Last Post: 15 May 2012 - 07:02 PM

#1 PF2G  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 15-November 11

Hide/Show Effect - Javascript/Jquery

Posted 11 May 2012 - 04:19 AM

Hi,

I'm working on a website where i have the list of all products and its info: image, description, reference and a button to see more images of the product. I want to create a checkbox that when is checked all the info is hidden except the image.

I'm using this code but the effect doesn't work. Can someone help me?


<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="shortcut icon" type="image/x-icon" href="imagens/plasticos.ico" />
	<link href="styles/style.css" rel="stylesheet" />
	<title>Plásticos Futura - Produtos</title>
	<script type="text/javascript" src="js/java.js"></script>
<!------------------------------------------------------------------------------>	
	<script language="javascript/jquery">
		function validate(chk)
		{
			if (chk.checked == 1)
			{
				$("button").click(function()
				{
					$("p").hide(1000);
				});

			}
		}
	</script>

</head>


<!------------------------------------------------------------------------>	
<p>	

<td valign="top" class="texto_pretobig2"><strong>REFERÊNCIA: </strong><?php echo $row_produtos['referencia']; ?><br />
												<strong>DESCRIÇÃO:</strong> <?php echo $row_produtos['nome']; ?>
													<br/>
	<br/>
													<div id="a_img">
													<a href="ver_produto.php?id_produto=<?php echo $row_produtos['id_produto']; ?>&id_categoria=<?php echo $row_produtos['id_material']; ?>" class="a_img">Mais imagens</a>
													</div>
												</p>
<!------------------------------------------------------------------------>	
												<br/>
<form>
<input type="checkbox" name="chk1"> Esconder Info</input>
<br/>
<button type="button" onclick="return validate(chk1);">Submeter</button>
</form>



Is This A Good Question/Topic? 0
  • +

Replies To: Hide/Show Effect - Javascript/Jquery

#2 PF2G  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 15-November 11

Re: Hide/Show Effect - Javascript/Jquery

Posted 11 May 2012 - 08:12 AM

I've tried everything and nothing.

Now I have this one:

    <br/>
    <input type="checkbox" id="validchk" name='exp6'/>Esconder/Mostrar<br/>
    <input type="button" value="Submeter" id='ischecked' />
    <script>
    // Validate checkbox is checked
    $('#ischecked').click(function()
    {
    if($('#validchk').is(':checked')) 
    {
    $("p").hide(1000);
    }
    else
    {
    }
    });
    </script>


And my browser breaks, because of a script problem.

Please help me!!
Was This Post Helpful? 0
  • +
  • -

#3 JulianNeill  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 13
  • Joined: 15-May 12

Re: Hide/Show Effect - Javascript/Jquery

Posted 15 May 2012 - 07:02 PM

Have you reviewed

Hiding/Showing Elements

Review the following:


script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>
 
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>





Explanation:

By default, the peek-a-boo text is loaded when the page loads but the display attribute for the div that the content resides in is set to none so it is not visible to the visitor. When the link is clicked, the toggle() Javascript functions executes and checks the value of the display style for the div that contains the content that we want to toggle.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1