Project Lima pattern lib

Toggle 

<a href="#" class="b-link b-link--block example-link js-toggle" data-target=".targeted-element">
    <span class="example-link__open-message">Open</span>
    <span class="example-link__close-message">Close</span>
</a>
<div class="targeted-element">
    <span class="targeted-element__open-message">Opened</span>
    <span class="targeted-element__close-message">Closed</span>
</div>

<style type="text/css">
    .example-link .example-link__open-message {
        display: block;
    }

    .example-link .example-link__close-message {
        display: none;
    }

    .example-link.is-open .example-link__open-message {
        display: none;
    }

    .example-link.is-open .example-link__close-message {
        display: block;
    }

    .targeted-element .targeted-element__open-message {
        display: none;
    }

    .targeted-element .targeted-element__close-message {
        display: block;
    }

    .targeted-element.is-open .targeted-element__open-message {
        display: block;
    }

    .targeted-element.is-open .targeted-element__close-message {
        display: none;
    }
</style>
 
<a href="#" class="b-link b-link--block example-link js-toggle" data-target=".targeted-element">
    <span class="example-link__open-message">Open</span>
    <span class="example-link__close-message">Close</span>
</a>
<div class="targeted-element">
    <span class="targeted-element__open-message">Opened</span>
    <span class="targeted-element__close-message">Closed</span>
</div>

<style type="text/css">
.example-link .example-link__open-message {
    display: block;
}

.example-link .example-link__close-message {
    display: none;
}

.example-link.is-open .example-link__open-message {
    display: none;
}

.example-link.is-open .example-link__close-message {
    display: block;
}

.targeted-element .targeted-element__open-message{
    display: none;
}

.targeted-element .targeted-element__close-message{
    display: block;
}

.targeted-element.is-open .targeted-element__open-message{
    display: block;
}

.targeted-element.is-open .targeted-element__close-message{
    display: none;
}
</style>
 
/* No context defined for this component. */

NOTE: The styles and the “example-link” & “targeted-element” classes are just to demonstrate how this component works.

NOTE: You will not need an inline style tag like is used in the example.

This component will help create elements you may need to toggle from a click i.e. a mobile navigation menu.

How this works is you add to a link js-toggle with a data-target value of either the ID or class of the element you wish to target (classes with be formatted like this .classname and IDs will be formatted like this #IDname, also it is advised you do not use a href on this link).

When the link is clicked (and you have set it up as described above), the link and the targeted element will both toggle a class of is-open, which you can then use to style the open toggle state of your element.

No styles have been added to either element, this is so that it can be used in a wide range of situations and not locked down to a single use case.