CODEWITHSUNDEEP
jqueryhtmlcss
John Doe
John Doe

Reputation: 13

jQuery Text box not showing

I am trying to show a text box when some one click on the click me button Check here

When the user click on the "click me" button I want to display the area colored box.

Here is my code.

HTML

<h1>Welcome to QuickSchools</h1>


<div id="section" style="display:none;">Here is a new section</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting</div>
<button type="button" id="btn">Click Me</button>

CSS

#section{
background-color:red;
margin-left: 363px;
width: 200px;
height: 150px;
margin-top: -61px}

jQuery

$( "button" ).click(function() {
$("#section").show();});

Can any one help ?

Here is the jsFiddle: http://jsfiddle.net/nz7z9dtu/

Upvotes: 1

Views: 118

Answers (1)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

Please see jsfiddle -http://jsfiddle.net/nz7z9dtu/9/

In order to achieve what you are looking for - prntscr.com/6tpi12 - you should decrease the width of the 'content' class div on click as well as displaying the 'section' class. To do this your jquery should be as follows:

$( "button" ).click(function() {
    $(".section").show();
    $(".content").css("width", "70%")
});

Upvotes: 1

Related Questions