How Can I add +/- symbols or icons on an expanding / collapsing custom module?

[viralniral]

I'd like to add + / - symbols or icons (e.g. triangle/inverted triangle, or chevron/inverted chevron) indicating to a user that a text box can be expanded and collapsed. Any ideas on how I can program that into my custom module in Hubl?

Here's my snippet so far (it works without the function mentioned above).

<div class="hs-accordion-wrapper clearfix {% if widget.expand %}expand{% endif %}">
    <div class="accordion-title">
        <h3>{{ widget.title }}</h3>
    </div>
    <div class="two-col-right-wrapper clearfix">
    <div class="feature-text col1">
        <div class="feature-image">
            {% if widget.left_column_image.src %}
                <a title="{{ widget.left_column_image.alt }}" href="{{ widget.left_column_image.src }}" rel="lightbox">
                    <img src="{{ widget.left_column_image.src }}" width="{{ widget.left_column_image.width }}" height="{{ widget.left_column_image.height }}" alt="{{ widget.left_column_image.alt }}">
                </a>
            {% endif %}
            <br>
            click the image above to view larger version
        </div>
    </div>
    <div class="feature-text col2">
        {{ widget.right_column_content }}
    </div>
</div>
</div>

[louiegerodiaz · Accepted solution]

Hello there!

I haven't tried this on actual, but perhaps this might give you a bit of a jumpstart with what you're trying to achieve:

<div class="hs-accordion-wrapper clearfix {% if widget.expand %}expand{% endif %}">
  <div class="accordion-title">
    <h3>{{ widget.title }}</h3>
  </div>
  <div class="two-col-right-wrapper clearfix">
    <div class="feature-text col1">
      <div class="feature-image">
        {% if widget.left_column_image.src %}
        <a title="{{ widget.left_column_image.alt }}" href="{{ widget.left_column_image.src }}" rel="lightbox">
          <img src="{{ widget.left_column_image.src }}" width="{{ widget.left_column_image.width }}" height="{{ widget.left_column_image.height }}" alt="{{ widget.left_column_image.alt }}">
        </a>
        {% endif %}
        <br>
        click the image above to view larger version
      </div>
    </div>
    <div class="feature-text col2">
      {{ widget.right_column_content }}
    </div>
  </div>
</div>

<style>
  .accordion-title {
    cursor: pointer; /* make the div a bit more clickable when hovered */
  }
  .accordion-title h3:before {
    content: "+"; /* initial state when the expand option is not enabled */
    padding: 0 5px;
  }
  .expand .accordion-title h3:before {
    content: "-"; /* will show when expand option is enabled */
  }

  .two-col-right-wrapper {
    display: none;
  }
  .expand .two-col-right-wrapper {
    display: block;
  }
</style>

<script type="text/javascript">
  $(document).ready(function(){
    var wrapper = $('.hs-accordion-wrapper');
    var title = $('.accordion-title');
    
    title.click(function(){
      wrapper.toggleClass('expand');
    });
  });
</script>

Let me know if this works or if there's a bit more tinkering needed, I'd be glad to help you out!

Kind regards,

Louie

[louiegerodiaz · Accepted solution]

Hello there!

I haven't tried this on actual, but perhaps this might give you a bit of a jumpstart with what you're trying to achieve:

<div class="hs-accordion-wrapper clearfix {% if widget.expand %}expand{% endif %}">
  <div class="accordion-title">
    <h3>{{ widget.title }}</h3>
  </div>
  <div class="two-col-right-wrapper clearfix">
    <div class="feature-text col1">
      <div class="feature-image">
        {% if widget.left_column_image.src %}
        <a title="{{ widget.left_column_image.alt }}" href="{{ widget.left_column_image.src }}" rel="lightbox">
          <img src="{{ widget.left_column_image.src }}" width="{{ widget.left_column_image.width }}" height="{{ widget.left_column_image.height }}" alt="{{ widget.left_column_image.alt }}">
        </a>
        {% endif %}
        <br>
        click the image above to view larger version
      </div>
    </div>
    <div class="feature-text col2">
      {{ widget.right_column_content }}
    </div>
  </div>
</div>

<style>
  .accordion-title {
    cursor: pointer; /* make the div a bit more clickable when hovered */
  }
  .accordion-title h3:before {
    content: "+"; /* initial state when the expand option is not enabled */
    padding: 0 5px;
  }
  .expand .accordion-title h3:before {
    content: "-"; /* will show when expand option is enabled */
  }

  .two-col-right-wrapper {
    display: none;
  }
  .expand .two-col-right-wrapper {
    display: block;
  }
</style>

<script type="text/javascript">
  $(document).ready(function(){
    var wrapper = $('.hs-accordion-wrapper');
    var title = $('.accordion-title');
    
    title.click(function(){
      wrapper.toggleClass('expand');
    });
  });
</script>

Let me know if this works or if there's a bit more tinkering needed, I'd be glad to help you out!

Kind regards,

Louie

[Krisnatarajan]

Hello,

Thank you for this update and it is really helping me out. I have currently used this code to update my email template and use this to expand text. I see that this works on the preview mode of the code but does not work on the template itself. I am not a programmer, I am a marketing coordinator haha so I dont speak any programming language. Please let me know if you could help me with what I can input in this code for it to work in the template as well. 

Many Thanks,

Kris. 

[viralniral]

Thank you so much!  It works. A couple of follow-up questions:

1. However, how can I revert back to a "+" after the accordion has been expanded and then re-collapsed? Currently, once it's closed, it still shows the "-". See image below.

2. How can I format the +/- to be a different color than the title (e.g. bolded, larger font size).

Thank you very much for your help!

[louiegerodiaz]

Hello again,

I finally had the time to try this out on a test portal and found some amendments on my first suggestion.

1. Can you please try to patch this new code (see full code below) in to your custom module? This might resolve the issue on the "+/-" when collapsed.

2. You can further modify the "+/-" symbols by adding more CSS declarations on these lines. (Bonus: I've added some sample styles to get you started )

.accordion-title h3:before {
  content: "+";
  padding: 0 5px;
  font-size: 1.25em;
  color: #000000;
}

Anyhow, here's the full code at your disposal:

<div class="hs-accordion-wrapper clearfix {% if widget.expand %}expand{% endif %}">
  <div class="accordion-title">
    <h3>{{ widget.title }}</h3>
  </div>
  <div class="two-col-right-wrapper clearfix">
    <div class="feature-text col1">
      <div class="feature-image">
        {% if widget.left_column_image.src %}
        <a title="{{ widget.left_column_image.alt }}" href="{{ widget.left_column_image.src }}" rel="lightbox">
          <img src="{{ widget.left_column_image.src }}" width="{{ widget.left_column_image.width }}" height="{{ widget.left_column_image.height }}" alt="{{ widget.left_column_image.alt }}">
        </a>
        {% endif %}
        <br>
        click the image above to view larger version
      </div>
    </div>
    <div class="feature-text col2">
      {{ widget.right_column_content }}
    </div>
  </div>
</div>

<style>
  .accordion-title {
    cursor: pointer;
  }
  .accordion-title h3:before {
    content: "+";
    padding: 0 5px;
    font-size: 1.25em;
    color: #000000;
  }
  .expand .accordion-title h3:before {
    content: "-";
  }

  .two-col-right-wrapper {
    display: none;
  }
  .expand .two-col-right-wrapper {
    display: block;
  }
</style>

<script type="text/javascript">
  $(document).ready(function(){
    var title = $('.accordion-title');

    title.each(function(){
      $(this).click(function(){
        $(this).parent().toggleClass('expand');
      });
    });
  });
</script>

I hope these solves and answers your question. And as always, let me know if you need further help.

Happy coding!

Kind regards,

Louie

[viralniral]

Hi Louie - thanks for your help!

1. I managed to use some of your code and it seems to be working with a few errors. For example:

- I click on the last accordion, and the arrow drops as expected, along with the rich text.

- I click on the accordion above, and the content from the last accordion collapses, and the arrow returns back to its original state, however

- The accordion above does not trigger (content/arrow does not drop as expected)

- Sometimes the arrows do not drop at all, when the content drops

- The arrow drops, and the content expands for a second, but then automatically re-collapses.

Are you able to determine what I'm doing wrong in the code below?

JS:

    $('.body-container-wrapper').find('script:not(script[type="IN/Share"])').remove().end().wrapAll('<div id="site-wrapper"></div>');
    
    $('.accordion-content').hide();
    $('.expand .accordion-content').show();
    $('.accordion-title').click(function(){
        $(this).closest('.hs_cos_wrapper_type_custom_widget').siblings().find('.accordion-content').slideUp();
        $(this).closest('.hs_cos_wrapper_type_custom_widget').siblings().find('.hs-accordion-wrapper').removeClass('expand');
        $(this).parent().addClass('expand');
        $(this).next().slideToggle(250);
        var title = $('.accordion-title');
        title.each(function(){
        $(this).click(function(){
        $(this).parent().toggleClass('expand');
        });
       });        
    });
});

CSS:

.hs-accordion-wrapper {
    position: relative;
}

.accordion-title {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-bottom: none;
    cursor: pointer;
}

.accordion-title h3:before {
    content: "►  "; /* initial state when the expand option is not enabled */
    font-size: 19px;
    padding: 0px;
    margin: 0;
    
}

.accordion-content {
    padding: 15px;
    border: 1px solid #ccc;
    border-top: 0;
}

.expand .accordion-content {
    border-bottom: 0;
    border-top: 0;
}

.expand .accordion-title :before {
    content: "▼  "; /* will show when expand option is enabled */
    font-size: 19px;
    padding: 0px;
    margin: 0;
    border-bottom: 0px solid #ccc;
}

.hs_cos_wrapper_type_custom_widget:last-of-type .accordion-title, 
.hs_cos_wrapper_type_custom_widget:last-of-type .accordion-content {
    border-bottom: 1px solid #ccc;
}

.two-col-right-wrapper {
    display: none;
}

.expand .two-col-right-wrapper {
    display: block;
}

Accordion Module:

<div class="hs-accordion-wrapper clearfix {% if widget.expand %}expand{% endif %}">
    <div class="accordion-title">
        <h3>{{ widget.title }}</h3>
    </div>
    <div class="two-col-right-wrapper clearfix accordion-content">
    <div class="feature-text col1">
        <div class="feature-image">
            {% if widget.left_column_image.src %}
                <a title="{{ widget.left_column_image.alt }}" href="{{ widget.left_column_image.src }}" rel="lightbox">
                    <img src="{{ widget.left_column_image.src }}" width="{{ widget.left_column_image.width }}" height="{{ widget.left_column_image.height }}" alt="{{ widget.left_column_image.alt }}">
                </a>
            {% endif %}
            <br>
            click the image above to view larger version
        </div>
    </div>
    <div class="feature-text col2">
        {{ widget.right_column_content }}
    </div>
</div>
</div>

[louiegerodiaz]

Hello again,

Hope you're well. Sorry for being able to reply just now. My schedule's been all over the floor these past few days. Anyhow, have you got the chance to work the issue out yourself?

Also, if it isn't too much, can we have a peak at the test page you're currently working on for this?

Thanks.

Kind regards,

Louie

[viralniral]

Hi Louie - haven't been able to make progress on resolving the arrow issue.

Is there a way I can share the link with you privately? 

[louiegerodiaz · Accepted solution]

Hi there,

I've just sent you a private message so you could share it in there.

Thanks,

Louie