Javascript to keep expandable list open

Question

I am coding a website and currently have 3 list items that expand and shrink onClick. The 3rd list item contains a contact form and I would like it to not shrink when the form fields are clicked on, but still shrink if any other part of the list item is clicked. Is this possible? Here is the HTML and Javascript I am currently using

<ul class="tiles">
  <li class="tiles__tile" data-tile="1">
    <h2>About</h2>
  </li>
  <li class="tiles__tile" data-tile="2">
    <h2>Work</h2>
  </li>
  <li class="tiles__tile" data-tile="3">
    <h2>Contact</h2>
  </li>
</ul>
<li class="content__item" id="3">
    <div class="content-wrap">
      <h2> GET IN TOUCH </h2>
    <form class="form" id="form1" method="post" action="" method="post"/>
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name"/>
      </p>

      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email"/>
      </p>

      <p class="text">
        <textarea name="comment" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
      </p>


      <div class="submit">
        <input type="submit" value="SEND" id="button-blue" href=""/>
        <div class="ease"></div>
      </div>
</div>
    </div>
  </li>
</ul>
</form>



    <li class="content__item" id="3">
    <div class="content-wrap">
      <h2> GET IN TOUCH </h2>
    <form class="form" id="form1" method="post" action="" method="post"/>
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name"/>
      </p>

      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email"/>
      </p>

      <p class="text">
        <textarea name="comment" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
      </p>


      <div class="submit">
        <input type="submit" value="SEND" id="button-blue" href="dillonpropp.com"/>
        <div class="ease"></div>
      </div>
</div>
    </div>
  </li>
</ul>
</form>



 var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');

tileBtn.on('click touchstart', function() {
  var self = $(this);
  var match = self.attr('data-tile');
  var allContent = $('li.content__item');
  var content = $('li#' + match);

  self.toggleClass('active');

  content.toggleClass('active');

 contentWrap.css({'transition-delay': '.35s'});

  return false;
});

$(window).on('click touchstart', function() {
  if (allContent.hasClass('active') && tileBtn.hasClass('active')) {
    allContent.removeClass('active');
    setTimeout(function() {
      tileBtn.removeClass('active');
    }, 400);
    contentWrap.css({'transition-delay': '.0s'});

  }
})

Answer 1

The problem is the handlers attached to the window object.

var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');

tileBtn.on('click touchstart', function() {
  var self = $(this);
  var match = self.attr('data-tile');
  var allContent = $('li.content__item');
  var content = $('li#' + match);

  self.toggleClass('active');

  content.toggleClass('active');

  contentWrap.css({
    'transition-delay': '.35s'
  });

  return false;
});

$(window).on('click touchstart', function(e) {
  if (allContent.hasClass('active') && tileBtn.hasClass('active') && !$(e.target).is('.content__item :input')) {
    allContent.removeClass('active');
    setTimeout(function() {
      tileBtn.removeClass('active');
    }, 400);
    contentWrap.css({
      'transition-delay': '.0s'
    });

  }
})

.content__item {
  display: none;
}
.content__item.active {
  display: list-item;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tiles">
  <li class="tiles__tile" data-tile="1">
    <h2>About</h2>
  </li>
  <li class="tiles__tile" data-tile="2">
    <h2>Work</h2>
  </li>
  <li class="tiles__tile" data-tile="3">
    <h2>Contact</h2>
  </li>
</ul>
<ul>
  <li class="content__item" id="1">1</li>
  <li class="content__item" id="2">2</li>
  <li class="content__item" id="3">
    <div class="content-wrap">
      <h2> GET IN TOUCH </h2>

      <form class="form" id="form1" method="post" action="" method="post">
        <p class="name">
          <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
        </p>
        <p class="email">
          <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
        </p>
        <p class="text">
          <textarea name="comment" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
        </p>
        <div class="submit">
          <input type="submit" value="SEND" id="button-blue" href="dillonpropp.com" />
          <div class="ease"></div>
        </div>
      </form>
    </div>
  </li>
</ul>