CODEWITHSUNDEEP
javascripthtmlcss
kr3t3n
kr3t3n

Reputation: 139

Display/Hide Div to be triggered by button only

I'm having this problem: I am trying to get a form with some sections to be hidden in a div, triggered by a button (image or input type button). The problem is, when the div expands, the user must click on the field to enter a value, however, clicking in the div hides it again :( Any ideas how I can fix this? I imagine the hide/show should be restricted to clicking the button only but at the moment it is triggered anywhere on the div. How do I limit it? Here's what I've done so far: http://jsfiddle.net/yczpex3z/

 $(document).ready(function(){
      $('.text_container').addClass("hidden");

      $('.text_container').click(function() {
        var $this = $(this);
        if ($this.hasClass("hidden")) {
          $(this).removeClass("hidden").addClass("visible");
        } else {
          $(this).removeClass("visible").addClass("hidden");
        }
      });
    });
body {
    background-image: url("bg1.png");
    text-align:center;
}
.content ul, .content li {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.wrap {
	text-align:center;
}
.hidden>div {
    display:none;
}
.visible>div {
    display:block;
}
.text_container {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	padding-left:5px;
}
.header-cont {
	z-index:2;
    width:100%;
}
.header {
    height:160px;
    background:#ffffff;
    border:1px solid #000000;
    border-bottom: none;
    width:940px;
    margin:0px auto;
    text-align:left;
}
.logo {
	margin:0px auto;
	height:120px;
	width:940px;
}
.menu {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.menu-table {
	display:table;
}
.menu-table-row {
	display:table-row;
}
.menu-table-cell, .menu-table-cell a, .menu-table-cell a:link, .menu-table-cell a:visited, .menu-table-cell a:active {
	display:table-cell;
	float:left;/*fix for  buggy browsers*/
	width:156px;
    text-align:center;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.menu-table-cell a:hover {
	display:table-cell;
	float:left;/*fix for  buggy browsers*/
	width:156px;
    text-align:center;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: red;
	text-decoration: none;
}
.content-cont {
	width:100%;
	text-align:center;
}
.content {
	background:#ffffff;
	border:1px solid #000000;
	border-top: none;
	width:940px;
	margin:0px auto;
	text-align:left;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.items {
	width=100%;
	display:table;
}
.items-row {
	display:table-row;
}
.items-cell {
    display:table-cell;
    width:313px;
    text-align:center;
    padding:10px 5px 15px 5px;
}
.item-single-table {
	width=100%;
	display:table;
	text-align:center;
}
.item-single-row {
	display:table-row;
}
.item-single-cell {
    display:table-cell;
    width:313px;
    background:white;
    text-align:center;
    padding:5px 0px 3px 0px;
}
.menuitems-table {
	display:table;
}
.menuitems-table-row {
	display:table-row;
}
.menuitems-table-cell {
	display:table-cell;
	width:313px;
	text-align:left;
	padding-left:5px;
	padding-bottom:5px;
}
.footer {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: normal;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.orderbutton {
	z-index:1;
	position: fixed; 
	right: 10px;
	bottom: 10px; 
	width: 240px; 
	height: 57px; 
}
.auto-style1 {
	text-align: center;
}
    a.fancybox img {
        border: none;
        box-shadow: 0 1px 7px rgba(0,0,0,0.6);
        -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
    } 
    a.fancybox:hover img {
        position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
    }
.auto-style2 {
	border: 1px solid #000000;
}
.auto-style3 {
	border-width: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="ordermenu">
<form name="contactform" method="post" action="send_form_email.php">
<div class="text_container"><input type='button' class="hideshow aperitivos" value='APERITIVOS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM1</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="gruckasalata" class="input gruckasalata" maxlength="5" size="5" /></div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow entradas" value='ENTRADAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM2</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow comidas" value='COMIDAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM3</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="musaka" class="input musaka" maxlength="5" size="5" />
</div>
<div class="menuitems-table-cell">PHOTO</div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM4</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="pulnenichushki" class="input pulnenichushki" maxlength="5" size="5">
</div>
<div class="menuitems-table-cell">PHOTO</div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM5</div>
<div class="menuitems-table-cell"><input  type="text" placeholder="0" name="svinskosuszele" class="input svinskosuszele" maxlength="5" size="5" />
</div>
<div class="menuitems-table-cell">PHOTO</div>
</div>
</div></div>
</div>
<div class="text_container"><input type='button' class="hideshow sobremesas" value='SOBREMESAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM6</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow bebidas" value='BEBIDAS' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM7</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="text_container"><input type='button' class="hideshow pao" value='PAO' />
<div><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">ITEM8</div>
<div class="menuitems-table-cell">FIELD</div>
<div class="menuitems-table-cell">PHOTO</div>
</div></div></div>
</div>
<div class="orderbutton" style=""><input type="text" disabled="disabled" id="totalprice" name="totalprice" /></div>
<div class="contact-form"><div class="menuitems-table"><div class="menuitems-table-row">
<div class="menuitems-table-cell">NAME *</div>
<div class="menuitems-table-cell"><input  type="text" name="name" maxlength="50" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Email Address *</div>
<div class="menuitems-table-cell"><input  type="text" name="email" maxlength="80" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Telephone Number *</div>
<div class="menuitems-table-cell"><input  type="text" name="telephone" maxlength="30" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Address *</div>
<div class="menuitems-table-cell"><textarea  name="address" maxlength="1000" cols="45" rows="6"></textarea></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Postal Code *</div>
<div class="menuitems-table-cell"><input  type="text" name="postalcode" maxlength="30" size="30" /></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell">Comments</div>
<div class="menuitems-table-cell"><textarea  name="comments" maxlength="1000" cols="45" rows="6"></textarea></div>
<div class="menuitems-table-cell"></div>
</div>
<div class="menuitems-table-row">
<div class="menuitems-table-cell"></div>
<div class="menuitems-table-cell"><input type="submit" value="Submit" /></div>
<div class="menuitems-table-cell"></div>
</div>
</div></div>
</form>
</div>

Upvotes: 0

Views: 115

Answers (4)

saikumar.tammisetty
saikumar.tammisetty

Reputation: 153

i added the id for the button as "btn"

$(document).ready(function(){ $('.text_container').addClass("hidden");

$('#btn1').click(function() {

    var $res = $(this).closest("div");
    if ($res.hasClass("hidden")) {
      $($res).removeClass("hidden").addClass("visible");
    } else {
      $($res).removeClass("visible").addClass("hidden");
    }
  });
});

please check the code from fiddler here

hope my solution will help you.. :).

Upvotes: -1

Daryl
Daryl

Reputation: 610

Try adding your click event to your button instead of your form.

Edit: raduB beat me to it, but I'll post my solution as well.

$(document).ready(function(){
      $('.text_container').addClass("hidden");

      $('.text_container > input[type="button"]').click(function() {
        var $this = $(this.parentElement);
        if ($this.hasClass("hidden")) {
          $this.removeClass("hidden").addClass("visible");
        } else {
          $this.removeClass("visible").addClass("hidden");
        }
      });
    });

Upvotes: 0

wildavies
wildavies

Reputation: 1317

See this jsfiddle.

I have added a click event to the button and then it shows / hides it's parent ".text-container".

JS

 $(document).ready(function(){
      $('.text_container').addClass("hidden");

      $('.hideshow').click(function() {
        var $parentContainer = $(this).parents('.text_container');
        if ($parentContainer.hasClass("hidden")) {
             $parentContainer.removeClass("hidden").addClass("visible");
        } else {
          $parentContainer.removeClass("visible").addClass("hidden");
        }
      });
    });

Upvotes: 0

raduB
raduB

Reputation: 61

The problem is that you are putting the click event on the container, try this:

 $(document).ready(function(){
      $('.text_container').addClass("hidden");

      $('input[type="button"]').click(function() {
        var $this = $(this);
        if ($this.parent().hasClass("hidden")) {
          $this.parent().removeClass("hidden").addClass("visible");
        } else {
          $this.parent().removeClass("visible").addClass("hidden");
        }
      });
    });

Put click event on button and target it's parent to add class hidden/visible

Fiddle: http://jsfiddle.net/yma6m0w8/

Upvotes: 0

Related Questions