CODEWITHSUNDEEP
jqueryhide
Etep
Etep

Reputation: 3651

jQuery "hide" function is not working

I'm having trouble with getting the "hide" function of jQuery to work. Am I just using a dead link? Should I be using the 2.1.1? The "alert" function seems to work but the hide function doesn't. Any ideas what else I should do?

*{
	margin: 0px;
	padding: 0px;
}

#container{
	width: 900px;
	margin: 0px auto;
	font-family: helvetica;
}

.effects{

}
	.effects button, #content{
		display: inline-block;
		/*vertical-align: top;*/
	}

	button{
		border: 2px solid grey;
		border-radius: 5px;
		padding: 5px;
		margin: 50px 0 0 0;
		position: relative;
		vertical-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	#content{
		width: 700px;
	}

		#content h2, p{
			display: block;
			vertical-align: top;
			width: 700px;
		}

		h2{
			text-align: center;
			width: 700px;
		}

		p{
			width: 700px;
		}



	#border{
		border-bottom: 4px solid black;
		padding: 10px 0;
		/*margin: 10px 0;*/
	}
<!DOCTYPE>
<html>
<head>
	<title>Help me with jQuery</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){

			$('h1').click(function(){
				alert('hello');
			})
			$('#hide').click(function(){
				$('p').hide();
			})
        })
	</script>
</head>
  
<body>
	<h1>YOOO</h1>
	<div id="container">
		<div class="effects">
			<button div="hide">hide</button>
			<div div="content">
				<h2>hide</h2>
				<p>Hide the matched elements.</p>
			</div>
			<div id="border"></div>
		</div>
     </div>    
</body>
</html>

Upvotes: 2

Views: 4718

Answers (2)

MaxZoom
MaxZoom

Reputation: 7763

Small typo, you need to correct this line:

<button div="hide">hide</button>

to this:

<button id="hide">hide</button>

EDITED

 $(document).ready(function() {

   $('h1').click(function() {
     alert('hello');
   })
   $('#hide').click(function() {
     $('p').hide();
   })
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>YOOO</h1>
<div id="container">
  <div class="effects">
    <button id="hide">hide</button>
    <div div="content">
      <h2>hide</h2>
      <p>Hide the matched elements.</p>
    </div>
    <div id="border"></div>
  </div>
</div>

Upvotes: 2

Ben
Ben

Reputation: 802

Your problem is with your button

<button div="hide">hide</button>

It should be id="hide"

<h1>YOOO</h1>
<div id="container">
    <div class="effects">
        <button id="hide">hide</button>
        <div id="content">
            <h2>hide</h2>
            <p>Hide the matched elements.</p>
        </div>
        <div id="border"></div>
    </div>
 </div>

See this JsFiddle: http://jsfiddle.net/52eu3m4x/

Upvotes: 0

Related Questions