Svelte: How to change property of element acess by bind:this

I have block assign to a variable, how can I change its property?
Please help.
for example:
KCLeftPanel


let blockContents;

blockContents.hide() // not work.

Show full related code

    <List>
    <ListInput
      label="Name"
      type="text"
      placeholder="Your name"
      clearButton
      bind:value={myText}
    />
    {#each menuItems as mnItem, index (mnItem.id)}
      <ListItem item-content item-link
        title={mnItem.title}
        link={`${mnItem.link}/`}
      >
      <i slot="media" class="icon f7-icons">{mnItem.icon}</i>
      </ListItem>
    {/each}  
    </List>
    <Block bind:this={blockContents} >{activeText}</Block>
  </Page>
</View>

And where do you see it has hide() method? https://framework7.io/svelte/block.html

@nolimits4web : What’s my foolish, thanks for point out.
By the way how can I change the visibility of any element? Can I change the properties of elements via element instance which assigned by bind:this?
Thanks,

Don’t need bind:this at all, why? It can be conditionally rendered or set display: none:

<Page>
  ...
  <Button onClick={toggleBlock}>Toggle Block</Button>

  {#if showBlock}
    <Block>...</Block>
  {/if}
</Page>
<script>

  let showBlock = false;

  // toggle block
  function toggleBlock() {
    showBlock = !showBlock;
  }
</script>
1 Like

@nolimits4web thank you very much.