0

when i use a touchstart event to show a div on my phonegap app, thats open the div but also click on a button into this div.

Do you have any idea to prevent the button to be triggered ?

1 Answers1

0

... i don't know exactly what you mean but maybe this helps ->

If you are using jQuery you could do it like this:

HTML

<div class="container">
  <div class="header">Bla blah</div>
  <div class="content">
    <p> Some content here </p>
  </div>
</div>

<div class="container collapsed">
  <div class="header">Bla blah</div>
    <div class="content">
    <p> Some content here </p>
  </div>
</div>

CSS

.container{
  width:300px;
  background:#ccc;
  margin:10px;
  float:left;
}

.header{
  background:url('http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png') no-repeat;
  background-position:right 0px;
  cursor:pointer;
}

.collapsed .header{
  background-image:url('http://cdn2.iconfinder.com/data/icons/vaga/arrow_down.png');
}

.content{
  height:auto;
  min-height:100px;
  overflow:hidden;
  transition:all 0.3s linear;
  -webkit-transition:all 0.3s linear;
  -moz-transition:all 0.3s linear;
  -ms-transition:all 0.3s linear;
  -o-transition:all 0.3s linear;
}
.collapsed .content{
  min-height:0px;
  height:0px;
}

JS

$(function(){
  $('.header').click(function(){
    $(this).closest('.container').toggleClass('collapsed');
  });

});

And here is a working fiddle for you: http://jsfiddle.net/AMzfe/

Sithys
  • 3,655
  • 8
  • 32
  • 67