toggle div with button onclick

Page 1 of 1

9 Replies - 5393 Views - Last Post: 22 July 2014 - 10:44 AM

#1 AnthonyGuevara   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

toggle div with button onclick

Posted 22 July 2014 - 09:21 AM

I have a button that I would like to show the content of a hidden div once clicked and hide again with another click.

Here is what I have come up with but can't seem to get working.

THE HTML
<button id="toggleButton" type="button">Toggle</button>
<div class="div1">hello</div>


THE CSS
button#toggleButton  {
	height: 25px;
	width: 100px;
	font-weight: bold;
	top: 220px;
	left: 60px;
	position: absolute;	 
	}	     
	
div.div1 {	
	visibility: hidden;	
	}


THE JQUERY
$(document).ready( function {
$('#toggleButton').click( function() {
	 $('.div1').toggle();
	 });
	});


What am I doing wrong? Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: toggle div with button onclick

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: toggle div with button onclick

Posted 22 July 2014 - 09:27 AM

.toggle() uses the display property, not the visibility property.
Was This Post Helpful? 0
  • +
  • -

#3 AnthonyGuevara   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Re: toggle div with button onclick

Posted 22 July 2014 - 09:35 AM

Even while using the display property, it still does not work. Thank you.

This post has been edited by Dormilich: 22 July 2014 - 09:43 AM
Reason for edit:: removed previous quote

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: toggle div with button onclick

Posted 22 July 2014 - 09:43 AM

it works for me.
Was This Post Helpful? 0
  • +
  • -

#5 AnthonyGuevara   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Re: toggle div with button onclick

Posted 22 July 2014 - 09:46 AM

View PostDormilich, on 22 July 2014 - 09:43 AM, said:

it works for me.


That's odd then. I am using Chrome on Linux and it doesn't run on my box. Not even on JSFiddle. http://jsfiddle.net/2yBGh/
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 16479
  • View blog
  • Posts: 65,313
  • Joined: 12-June 08

Re: toggle div with button onclick

Posted 22 July 2014 - 09:50 AM

What does your entire file/code look like?

Are you missing the reference to jquery?
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: toggle div with button onclick

Posted 22 July 2014 - 09:58 AM

once you add the dependency and fix the syntax errors, it works.
Was This Post Helpful? 1
  • +
  • -

#8 AnthonyGuevara   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Re: toggle div with button onclick

Posted 22 July 2014 - 10:01 AM

View Postmodi123_1, on 22 July 2014 - 09:50 AM, said:

What does your entire file/code look like?

Are you missing the reference to jquery?


I am using an external JS file and I have included it. I have also included the JQ reference with 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


I am trying to write something that I can load into the page if a specific option in my drop down menu is selected with onchange. Ultimately I am trying to show info on clicking that button. Just trying to get a hold of the concepts atm. Also the css file is externally linked too. The program will not work even on JSFiddle, where I do not need to include headers(not sure what the js and JQ references are called). Thanks again.
Was This Post Helpful? 0
  • +
  • -

#9 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: toggle div with button onclick

Posted 22 July 2014 - 10:14 AM

Quote

where I do not need to include headers(not sure what the js and JQ references are called).

look at the left side where it says "Frameworks & Extensions". select your jQuery lib of choice in the first dropdown and in the second select "No wrap - in <head>". then press Run (top menu) to have it immediately available or Update to save it.
Was This Post Helpful? 1
  • +
  • -

#10 AnthonyGuevara   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Re: toggle div with button onclick

Posted 22 July 2014 - 10:44 AM

Thank you. I got it working.

The HEAD
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/Main.js"></script>
<link rel="stylesheet" href="CSS/Main.css"></link>
</head>


The REST of the body
</head>
<body>
<button id="toggle" type="button">Toggle</button>
<div class="div1">hello</div>
</body>
</html>


I added a jquery reference in the head and reformatted the jquery and now it works.

This post has been edited by Dormilich: 22 July 2014 - 10:46 AM
Reason for edit:: removed previous quote

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1