<script>
    export let title;
    let hidden = true;
</script>

<div class="collapsedFAQ">
    <div class="title" on:click={ ()=> {hidden = !hidden} }>
        <div class="symbol">{hidden ? '+' : '−'}</div> {title}
    </div>
    <div class="faqPoint" style="display: {hidden ? 'none' : 'block'}">
        <slot />
    </div>
    
</div>

<style>
    .collapsedFAQ{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .symbol{
        display: inline-block;
        width: 1.0em;
    }
    .title{
        color: #72bbd9;
        cursor: pointer;
        font-weight: bold;
        user-select: none;
    }
    .faqPoint{
        margin-bottom: 2.0em;
    }
    :global(.faqPoint p:first-child) {
        margin-top: 0;
    }
</style>