Polymer: Can i change paper-drawer-panels content?

Question

Hello I want to ask if is possible to change paper drawer panels content if I use another button to open the drawer. I just need this to make the page which drawer will change content from some adjustment to do. I have the adjustments I have the to do but how to create this content changing?

This is the drawer panel I have now:

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer>
    <div drawer>
        <h2 style="text-align:center ">Adjustments</h2>
        <div class="togglebtn">
            Display search box<paper-toggle-button tabindex="0" id="searchcheck" name="searchcheck" class="red searchcheck"
                                                   onChange="resetradio(this)"></paper-toggle-button>

            <div class="buttons">

                <label for="label3" class="text">Choose search engine</label>
                <paper-radio-group allow-empty-selection aria-labelledby="label3">
                    <paper-radio-button name="google" id="search" class="search" value="https://www.google.com/search"
                                        onclick="formaction(this);setcheckbox()"><label for="search">Google</label>
                    </paper-radio-button>
                    <paper-radio-button name="seznam" id="search" class="search" value="https://search.seznam.cz/"
                                        onclick="formaction(this);setcheckbox()"><label for="search">Seznam</label>
                    </paper-radio-button>
                    <paper-radio-button name="bing" id="search" class="search" value="https://www.bing.com/search"
                                        onclick="formaction(this);setcheckbox()"><label for="search">Bing</label>
                    </paper-radio-button>
                </paper-radio-group>
            </div>
        </div>
        <br/>
        <div class="togglebtn2">
            <paper-toggle-button tabindex="0" id="clock" name="showclock" class="red clockdis"
                                 onChange="resetclock(this);">
                Clock
                hide/show
            </paper-toggle-button>
            <div class="buttons2">
                <label for="label3" class="text">Choose Format</label>
                <paper-radio-group allow-empty-selection aria-labelledby="label3">
                    <paper-radio-button value="24" name="format" class="format"
                                        onChange="setclock();setFormat(this.value)">
                        24 Hours
                    </paper-radio-button>
                    <paper-radio-button value="12" name="format" class="format"
                                        onChange="setclock();setFormat(this.value);setpos()">12 Hours
                    </paper-radio-button>

                </paper-radio-group>
            </div>
        </div>
        <div id="closebtn">
            <paper-button tabindex="0" icon="close" class="cls" paper-drawer-toggle>Close drawer</paper-button>
        </div>
    </div>
    <div main>
        <div>

            <paper-icon-button icon="settings" class="drawerbtn" paper-drawer-toggle></paper-icon-button>

        </div>
    </div>
</paper-drawer-panel>

Thank you for any help.

Answer 1

To achieve what you want, you can use a <template is="dom-if" if=""></template>, or the hidden attribute to change the content of the drawer with a data-binded properties.

The drawer will look something like this

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer>
    <div hidden$=[[typeTwo]]>
        ...
    </div>
    <div hidden$=[[!typeTwo]]>
        ...
    </div>
</paper-drawer-panel>

or for the dom-if version

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer>
    <template is="dom-if" if="[[typeTwo]]">
        ...
    </template>
    <template is="dom-if" if="[[!typeTwo]]">
        ...
    </template>
</paper-drawer-panel>

You then just have to switch the typeTwo property from false to true or the other way before openning the drawer to change it's content. Here it will change the whole content, but you can do the same with some sub-elements.

You can have a function per button wich will do it.