CODEWITHSUNDEEP
polymerpolymer-1.0paper-elements
Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Polymer 1.x: Toggle iron-collapse by clicking paper-card heading

I want to toggle the open/closed state of the content of a paper-card element by clicking the heading of the paper-card only.

When I click inside the open content, I want the card to remain in the open state. And not toggle to the closed state.

Open this jsBin to read further and demo what I'm describing.

http://jsbin.com/kecemorojo/edit?html,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  <!---- >
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <!---->
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-card/paper-card.html" rel="import">
  <link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>
  <paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
    <iron-collapse id="collapse">
      <div class="card-content">
        I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
      </div>
    </iron-collapse>
  </paper-card>
</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      _toggleCollapse: function() {
        this.$.collapse.toggle();
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Upvotes: 1

Views: 1487

Answers (2)

Let Me Tink About It
Let Me Tink About It

Reputation: 16102

In addition to the accepted answer, at least two other solutions also exist:

if (e.target.classList.contains('title-text'))

here

and

if (e.target.classList.contains('title-text', 'style-scope', 'paper-card'))

here

Depending on the situation, one or the other might work better depending on what is being clicked inside the paper-card content section.

http://jsbin.com/kacatozolo/1/edit?html,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  <!---- >
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <!---->
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-card/paper-card.html" rel="import">
  <link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>
  <paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
    <iron-collapse id="collapse">
      <div class="card-content">
        I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
      </div>
    </iron-collapse>
  </paper-card>
</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      _toggleCollapse: function(e) {
        if (e.target.classList.contains('title-text', 'style-scope', 'paper-card')) {
          this.$.collapse.toggle();
        }
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Upvotes: 0

Scott Miles
Scott Miles

Reputation: 11027

  _toggleCollapse: function(e) {
    if (!e.target.classList.contains('card-content')) {
        this.$.collapse.toggle();
    }
  }

Upvotes: 2

Related Questions