Foundation 6 accordion collapse all item even if single item

Foundation allow you create accordion container if you have long list of content and want to present them in a beautiful manner.

By default accordion keep the first item as active and shows its content. By clicking on this single item it does not close that item. It only closes that item if you click on another item.  As per the foundation 6 documentation if you want to allow all items to be collapsible when user click on that accordion item title. You need to pass data-allowed-all-close=”true” to accordion container.

What if you have only single item in your accordion and want that accordion item to be collapsed by default on page load.

Let say you have Terms and Condition on your site and want to use accordion to collapse all the condition with single accordion item and on initial page load terms and condition section should be collapsed so it does not increase the page height and user may not need to scroll too much. User can expand terms and condition if he is interested to see.

This can be done by adding data-allowed-all-close=”true” to accordion container and removing is-active class from that single accordion item.

See the Pen Foundation – Accordion Component – All closed on load by mahesh sankhala (@msankhala) on CodePen.

Override Chrome selection background color

Have you ever noticed that some of the  cool well designed website have their selection background color according to theme of the website. For example if a website using green color for most of its design will show the green color when you select text  on website.  Here is a website http://www.impressivewebs.com/ if you select text on this website then it will show light brown color as background of selected text. You can do this with single line of CSS using CSS3 ::selection pseudo class. Put the following line in chrome’s user style custom.css file which is located at ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css  on mac.

::selection {
  background: teal; /* -webkit browser*/
}