Trying to create an if
, elseif
statement using the Liquid Templating Ruby engine It appears to be coded correctly but I am not experiencing the results I am expecting.
Im expecting when a user clicks on a collection (MLB, NBA, etc) the {% collection.handle
contains "mlb" %}
will trigger and its respective code block will come into play.
Is there anything that jumps out to anyone as incorrect with this if statement?
<div class="carousel-wrap">
<!-- College Slider -->
{% if page.handle or collection.handle contains "collegiate" %}
<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="ncaa-carousel">
<ul class="items clearfix">
{% for link in linklists.team-carousel.links %}
<li>
{% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
<a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
</li>
{% endfor %}
</ul>
</div>
{% elsif collection.current_type or collection.handle contains "mlb" %}
<!-- MLB Slider -->
<div style="margin-bottom: 10px; display: block !important;" class="teams-carousel" id="mlb-carousel">
<ul class="items clearfix">
{% for link in linklists.mlb.links %}
<li>
{% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
<a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
</li>
{% endfor %}
</ul>
</div>
{% elsif collection.current_type or collection.handle contains "nba" %}
<!-- NBA Slider -->
<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="nba-carousel">
<ul class="items clearfix">
{% for link in linklists.nba-team-carousel.links %}
<li>
{% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
<a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
</li>
{% endfor %}
</ul>
</div>
{% elsif collection.current_type or collection.handle contains "nhl" %}
<!-- NHL Slider -->
<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="nhl-carousel">
<ul class="items clearfix">
{% for link in linklists.nhl.links %}
<li>
{% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
<a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
</li>
{% endfor %}
</ul>
</div>
{% elsif collection.current_type or collection.handle contains "mls" %}
<!-- MLS Slider -->
<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="mls-carousel">
<ul class="items clearfix">
{% for link in linklists.mls.links %}
<li>
{% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
<a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
and
make me think that you want content to display when a user clicks (on something). If that's the case, you're going to need JavaScript, not Liquid. Liquid evaluates (everything) and generates a static page. The page (effectively) doesn't change after you hit "save". So Liquid content can't be appearing and disappearing.
However, you can show/hide this content very easily with JavaScript using JQuery.