website/layouts/case/list.html

{{ define "main" }}
<section class="section-1">
    {{ with .Params.section1 }}
    <img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
    <div class="title-div">
        <h1 class="title-center-h1">{{ .title }}</h1>
        <p class="common-p">{{ .content }}</p>
    </div>
    {{ end }}
</section>

<section class="section-2">
    {{ with .Params.section2 }}
    {{ $tip := .tip }}
    <ul class="cases-ul common-layout">
        {{ range .caseList }}
            <li>
                <img src="{{ .icon | absURL }}" alt="">
                <p class="title-p">{{ .content }}</p>
                <div>
                    <a class="common-green-a" href="{{ .link }}">{{ $tip }}</a>
                </div>
            </li>
        {{ end }}
    </ul>
    <img src="{{ .icon | absURL }}" alt="">
    {{ end }}
</section>

<section class="section-3">
    {{ with .Params.section3 }}
    <h2 class="title-black-h2">{{ .title }}</h2>
    <div>
        <ul id="case-group">
            <li class="active">{{ .tip }}</li>
            {{ range .caseType }}
            <li data-name="{{ .name }}">{{ .name }}</li>
            {{ end }}
        </ul>
        <ul id="case-children">
            {{ range .caseType }}
            {{ $name := .name }}
            {{ range .children }}
            <li data-name="{{ $name }}">
                <img src="{{ .icon | absURL }}" alt="">
            </li>
            {{ end }}
            {{ end }}
        </ul>
        {{ with .bottomContent }}
        <p>{{ .content }} <a class="common-green-a" href="{{ .link }}" target="_blank">{{ .linkContent }}</a></p>
        {{ end }}
    </div>
    <img src="{{ .icon | absURL }}" alt="">
    {{ end }}
</section>
<script>
    $('#case-group li').click(function() {
        $("#case-group li").removeClass("active");
        $(this).addClass("active");
        var name = $(this).data("name")
        if (name) {
            $("#case-children li").each(function(item) {
                if ($(this).data("name") !== name) {
                    $(this).hide()
                } else {
                    $(this).show()
                }
            })
        } else {
            $("#case-children li").show()
        }
	})
</script>
{{ end }}