Plugins Bootstrap CSS

The accordion CSS

Explanation

In this article, I'll show an example of creating a accordion CSS. Leads they themselves as well as the Bootstrap accordion. Link http://getbootstrap.com/javascript/#collapse-example-accordion

 

Feature

The principle of showing and hiding the contents of the accordion as in other examples, the site uses elements of input type="radio" and label, "tied" to these elements of the input.

Next, the sample code of one cell of the accordion and content to it.

  1. <div class="accordion">
  2. <input id="radio-1" type="radio" name="accordion"></input>
  3. <label for="radio-1">Button 1</label>
  4. <div>
  5. <div>Lorem ipsum ...</div>
  6. </div>
  7. </div>

Live demo
Read more

Bookmark CSS

Explanation

In this article, I'll show an example of creating tabs in CSS. They behave like bookmarks Bootstrap. Link http://getbootstrap.com/javascript/#tabs

 

Feature

The principle of showing and hiding content bookmarks as in other examples, the site uses elements of input type="radio" and label, "tied" to these elements of the input. However, to comply with the HTML stream had to use a float.

Next, the sample code one bookmark and content to it.

  1. <input id="tab-1" type="radio" name="tabs" checked>
  2. <label for="tab-1" class="not-selectable">tab-1</label>
  3. <div class="tab-1">
  4. <div class="tab-content">
  5. <p>Lorem ipsum ...</p>
  6. </div>
  7. </div>

Live demo
Read more

Modal window in CSS

Explanation

In this article, I'll show an example of creating a modal window on the CSS. It's acting as a Bootstrap modal window. Link http://getbootstrap.com/javascript/#modals

 

Feature

The principle of showing and hiding the modal window as in other examples of the site based on tag input type="checkbox" and attached to it a tag label. But to make the call modal window on button and stowing it by clicking the gray substrate or the close button in the modal window, used a trick. Namely, several elements label linked with one element of the inputresponsible for showing/hiding the modal window.

  1. <input id="modal" type="checkbox">
  2. <label for="modal" id="modal-overlay"></label>
  3. <label for="modal" id="modal-button">Show Modal</label>
  4. <div id="modal-window">
  5. <label for="modal" id="modal-close">X</label>
  6. <p>Lorem ipsum ...</p>
  7. </div>

Live demo
Read more