Accordion Chevron

benfromsaama · January 5, 2020, 3:14pm

Hello all,

Perhaps I am missing something. It appears to me that an option to provide a button or chevron to the Accordion widget should be available in BootStrap Studio. From what I am reading in StackOverflow, this can be accomplished via JQuery or even CSS.

Adding open/closed icon to Twitter Bootstrap collapsibles

The header is the link which expands or collapses the Accordion Item Content. For certain users, this may not be so obvious. Like I said earlier though, perhaps I am completely missing an Option in BSS?

I do realize that there are also several other BSS users who have provided "online" versions that can be downloaded. But I still feel this should be part of the BSS product. I have tried them all and the chevrons do not change based on collapse or expanded state of the component.

Thanks!

Ben

jo-r · January 5, 2020, 4:09pm

I found that adding a sentence above the Accordion that says something like "Click titles to open sections" etc. works just fine. For me I'd like to see a click anywhere on the bar to open an accordion rather than just a button though. I haven't tried stretching the link area which I may experiment with that as well.

Would be nice to have these as settings for accordions though without having to manually do it all yourself, I do agree there.

twinstream · January 5, 2020, 4:18pm

A simple CSS solution would be to add to the button a span (no text) with the class caret and expand_caret .

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.expand_caret {
  transform: scale(1.6);
  margin-left: 8px;
  margin-top: -4px;
}

a[aria-expanded='false'] > .expand_caret {
  transform: scale(1.6) rotate(-90deg);
}

twinstream · January 5, 2020, 4:44pm

Example below.

Question ?

How do I post HTML ? it gets all messed up ....

twinstream · January 5, 2020, 4:50pm

https://fancy-wind-7380.bss.design/

benfromsaama · January 5, 2020, 9:30pm

For posting any code, I use paste the code into the submission, highlight and click Ctrl+K. You can use the Curly Braces in the tool bar also {}.

Ben

twinstream · January 5, 2020, 10:00pm

<span></span>

twinstream · January 5, 2020, 10:05pm

<div id="accordionExample" class="mt-5">
    <a href="#collapse-2">Show Content
        <i class="fas fa-chevron-down expand_caret"></i>
    </a>
    <div class="collapse" id="collapse-2">
        <p>Collapse content.</p>
    </div>
</div>

For some reason it removes anything in a span tag ? I tried this example with a icon and it works ?

benfromsaama · January 6, 2020, 2:44am

That is odd! Have you ever tried jsfiddle.net? On jsfiddle you can post HTML, CSS, JS, test results, and share the link with other struggling developers like me ;-)

And BTW, thank you for the help with the Collapse code. It works great! I am surprised though that it is not part of the Accordion or Collapse component that BSS supplies.

Ben

Ignore this code... I too am trying to add a span to this comment to see what happens...Oddly it appears for me but perhaps because I posted it inside a paragraph tag?

<p>Add the <span>basil</span>, <span>pine nuts</span> and <span>garlic</span> to a blender and blend into a paste.</p>

benfromsaama · January 6, 2020, 3:02am

In relation to the Accordion/Collapse component, I especially like Lowes.com's version that contains an Icon, Header, and a +/-. You can click anywhere on the control to expand or collapse.

Lowes

In reviewing the HTML source, it appears they use mostly CSS much like the source you provided.

  <div class="panel print-friendly met-accordion js-track-gauge"
       data-gaugepath="accordion"
       data-met-name="headingSpecs">
    <div class="panel-heading"
         role="tab"
         id="headingSpecs">
      <h4 class="panel-title"><a data-toggle="collapse"
         href="#collapseSpecs"
         aria-expanded="false"
         aria-controls="collapseSpecs">Specifications</a></h4>
    </div>

    <div id="collapseSpecs"
         class="panel-collapse collapse pd-specs panel-body grid-100 grid-parent"
         role="tabpanel"
         aria-labelledby="headingSpecs">
      <div class="grid-50">
        <table class="table full-width no-borders">
          <tbody>
            <tr>
              <th>Length (Feet)</th>

              <td><span>50</span></td>
            </tr>

            <tr>
              <th>Width (Feet)</th>

              <td><span>4</span></td>
            </tr>

            <tr>
              <th>Material</th>

              <td><span>Wood fiber</span></td>
            </tr>

            <tr>
              <th>Photodegradable</th>

              <td><span>Yes</span></td>
            </tr>

            <tr>
              <th>Biodegradable</th>

              <td><span>Yes</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="grid-50">
        <table class="table full-width no-borders">
          <tbody>
            <tr>
              <th>Netless</th>

              <td><span>No</span></td>
            </tr>

            <tr>
              <th>Warranty</th>

              <td><span>None</span></td>
            </tr>

            <tr>
              <td></td>
            </tr>

            <tr>
              <th>UNSPSC</th>

              <td><span>10151700</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

printninja · January 6, 2020, 4:47am

I already posted this example in your other question, but this is not difficult to do. Here is an example on a site built in BSS.

http://bustosmartialartsofholbrook.com/#anchor-1

printninja · January 6, 2020, 4:49am

@Jo

You can adjust the CSS to make it possible to click anywhere on the accordion bar to open the accordion. See example here.

http://karatelehighvalley.com/aikido-masters-faq.html

If you folks want it, I'll upload it to the library. As I recall, it was just a matter of rearranging where the link is in the accordion component.

benfromsaama · January 6, 2020, 1:41pm

Would you please submit it to the Online Components via BootStrap Studio? That would be fantastic!

Ben

saj · January 6, 2020, 8:45pm

Seem very much like this as well.

https://saj.bss.design/accordion.html

Saj

jo-r · January 7, 2020, 1:44pm

Well herein lies the issue, the Accordion is all locked so you can't rearrange the link, and actually the headings aren't links at all so we cannot stretch them either :/ so it looks like it will have to be a CSS thing unless we get this unlocked :/

twinstream · January 7, 2020, 4:30pm

You can add stretched-link and text-decoration-none as classes to the button. I would add the class "accordion" to the main div wrapper that has the id accordion-1 also to set style for accordion correctly.

printninja · January 8, 2020, 9:19am

Okay, to make it so you can click anywhere on the accordion button and have it trigger the accordion, all you have to do is add the following CSS...

#accordion-1 .button-size { display: block; padding: 12px 20px; }

#accordion-1 .card-header { padding: 0; }

I'm not going to bother uploading a custom component since this is easy-peasy. Just note that once you add this CSS, you will no longer be able to click on the accordion text itself to make the "show" "hide" buttons appear in the UI above the website panel. You will have to click on the the Accordion Item in the Overview tree for those buttons to appear.

printninja · January 8, 2020, 9:48am

I've uploaded the version of this accordion used here...

http://bustosmartialartsofholbrook.com/#anchor-1

You can find it in the online library by searching "animated icon accordion." It would be nice if the Online search allowed you to search by user, so you could see all the components uploaded by a particular person. Maybe I should add my forum name to all my uploaded components, so people can just search "Printninja" and they'd all show up. Gotta think about that.

Anyway, use at your own risk. I did a lot of funky positioning things to make this work. You can only open the items by clicking on them in the Tree. The text changes size based on viewport width, so you might want to adjust that in the CSS for your own needs. Also, it's setup for a dark background, so using it on white will necessitate more CSS edits. This franken-accordion was something I created because a client had a web designer create a new home page for them in Photoshop, and this is what they wanted the accordion to look like, so I was challenged with making it work using the Bootstrap Accordion component, thus it's probably not the prettiest CSS you'll ever see, but it got the job done. Hope this helps someone out.