0

Is there a component in SXA or is there simple way how to create variant for "Accordion" component to achieve similar functionality as is used on Sitecore doc page where on top you have list of links to different sections of page which are referenced by hash # in anchor?

a) Something like this:

enter image description here

1 is list of links and 2 is already one of linked headers.

b) On the top link is generated with #_Shopping_Cart:

enter image description here

c) And H1 is generated with matching id _Shopping_Cart:

enter image description here

1 Answer 1

1

There isn't anything OOTB that would do this, even with Rendering Variants. The Accordion is probably the closest thing to that.

I think the easiest way to achieve what you want would be to clone the Accordion component and provide your own razor view for it. If you look at the existing razor for the Accordion (Just focusing on the part that builds the accordion section):

<div>
    <ul class="items">
        @foreach (var composite in Model.CompositeItems)
        {
            <li class="item">
                @using (Html.Sxa().BeginEditFrame(composite.Value.ID.ToString(), "Accordion", Model.IsControlEditable))
                {
                    var headerKey = string.Format("{0}-{1}-{2}", headerBaseKey, composite.Key, Model.Id);
                    <div class="toggle-header">
                        <div class="label">
                            @Html.Sitecore().Placeholder(headerKey)
                        </div>
                    </div>
                    var contentKey = string.Format("{0}-{1}-{2}", contentBaseKey, composite.Key, Model.Id);
                    <div class="toggle-content">
                        @Html.Sitecore().Placeholder(contentKey)
                    </div>
                }
            </li>
        }
    </ul>                            
</div>

Just a very quick alteration to that, adding a second loop would put the accordion content where you need it to be. Then the rendering variant of the content would take care of the H1 for the heading:

<div>
    <ul class="items">
        @foreach (var composite in Model.CompositeItems)
        {
            <li class="item">
                @using (Html.Sxa().BeginEditFrame(composite.Value.ID.ToString(), "Accordion", Model.IsControlEditable))
                {
                    var headerKey = string.Format("{0}-{1}-{2}", headerBaseKey, composite.Key, Model.Id);
                    <div class="toggle-header">
                        <div class="label">
                            @Html.Sitecore().Placeholder(headerKey)
                        </div>
                    </div>
                }
            </li>
        }
    </ul>                            
    @foreach (var composite in Model.CompositeItems)
    {
        <div class="item">
            @using (Html.Sxa().BeginEditFrame(composite.Value.ID.ToString(), "Accordion", Model.IsControlEditable))
            {
                var contentKey = string.Format("{0}-{1}-{2}", contentBaseKey, composite.Key, Model.Id);
                <div class="toggle-content">
                    @Html.Sitecore().Placeholder(contentKey)
                </div>
            }
        </div>
    }
</div>

Its not exactly the same markup and uses the Accordion JavaScript to toggle the content vs the anchor links with Id's, but it should give you the same result.

Caveat: The above code is untested, but gives you a starting point :)

1
  • 1
    Exactly what I was looking for. Thanks Richard Aug 23, 2018 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.