Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain HTML, and CSS with no Javascript at all!
\nFirstly, let's make some markup with HTML. We are going to create a div and give it a class of accordion like so:
<div class="accordion">\n\n</div>Next, inside the accordion div, we will create another div, this time without a class.
<div class="accordion">\n <div>\n \n </div>\n</div>Next up, we will create a checkbox or a radio button. We are creating a checkbox or a radio button so that we can make their checked states open or close the accordion. So if you want to be able to open all accordions at the same time, you will use checkbox, otherwise you will use radio buttons. But in this article, I've chosen to use checkbox.\nWe will give the checkbox an id of section1 and a class of accordion__input.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n </div>\n</div>Under the checkbox, we are going to create a label for the checkbox. This label will later on become the head of the accordion tab.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n </div>\n</div>Next, we will create a new div and give it a class of accordion__content because it will hold the content of the accordion. In this example, we will make the content of the accordion a paragraph.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n</div>Repeat the div without a class for as many as you want depending on how many accordion tabs you want. In this example, we will use only three of them.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n</div>That's it with the HTML, and it should be looking like this:\naccordion.\nWe will give it a:
max-width to set a size for it.box-shadow to provide it with a beautiful shadow.border-radius to give it nice, rounded corners.overflow to hide the content of the accordion tab when it is closed.background-color to set the color of the accordion tabs.So now we have:
\n.accordion{\n max-width: 400px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n border-radius: 15px;\n overflow: hidden;\n background-color: purple;\n}Now we will set some padding to the label and content so that there is some space between them and their borders.
\n.accordion__label, .accordion__content{\n padding: 14px 20px;\n}Next, we will style the accordion label and set the following properties:
\ndisplay: block to make the label take the full width of the accordion.color: white to make the text of the label white.font-weight: bold to make the text of the label bold.cursor: pointer to make the cursor pointer when it hovers on the label. It is important to make the user know that the label can be clicked.transition: background-color 0.1sposition: relativeSo it looks like this when combined:
\n.accordion__label{\n display: block;\n color: white;\n font-weight: bold;\n cursor: pointer;\n position: relative;\n transition: background-color 0.1s;\n}Now, we will make the color of the label darker when the user hovers on it. This is also to make the user know that he/she has placed the cursor on something that can be clicked.
\n.accordion__label:hover{\n background-color: rgba(0, 0, 0, 0.1);\n}Next up, we will style the content of the accordion and set the following properties:
\nbackground: white to make the background color of the content of the accordion white.line-height: 1.6 to increase the line-height of the text in the content.font-size: 0.85em to set the font size of the text of the content.display: none this is the most important property here so that we can hide the content of the accordion tab by default until the label is clicked.So when we put it together, we have this:
\n.accordion__content{\n background: white;\n line-height: 1.6;\n font-size: 0.85em;\n display: none;\n}Now we have to hide the checkbox from showing. To do that, we set the display property of it to none
.accordion__input{\n display: none;\n}The next thing to do is to show the accordion tab's content if the label is clicked. To do this, we have to set the display property of it to block when the label is clicked. We can know that the label is clicked using the check-state of the checkbox that we hid earlier.
.accordion__input:checked ~ .accordion__content{\n display: block;\n}Hurrayđ, we now have a lovely and functioning accordion that looks like this\n Navigation buttons, depending on your site of course, are likely going to be some of the most commonly used items on your web site. Typically they're found near the top so people can quickly and easily... well navigate of course! With this in mind it's worth it to make sure your navigation is both visually appealing and provides an enjoyable user experience. A common featured for navigation menus is the drop down functionality for displaying sub options. This can be achieved through Javascript if you really feel like it (you don't), but why bother with that when CSS3 offers a much more elegant solution! First we start out building a simple un-ordered list, and give it some list items each of which contain a link that point nowhere in particular. By the way, if you're on Sublime Text there's a great shortcut for making lists: ul>li+li+li+li and then \"Tab\" creates an un-ordered list with 4 list item tags inside of it. For more excellent Sublime tips check out my amigo Lucius' blog post on the topic. Now that we've got the bare bones, let's give this skeleton a spine. We're now going to put another ul inside of those list items, and once again more list items inside of those lists which contain, you guessed it, links to nowhere. That's all the HTML we have to write for this example, so now we move on to the CSS. The first few things on the ul's and links are just to remove some default styles that I don't care for. The first actually relevant style is the inline-block display property on the list items to make them spread out horizontally. If you're unfamiliar with using inline-block for positioning I highly recommend reading up on it because it's an awesome alternative to floats or sometimes even flex-box. Next up we give these list items a relative position, so that the later absolutely positioned sub menu will use this as a reference point. To quote every MTV cribs star ever, here's where the magic happens. We put a max-height (that is at least as tall as all of the list items on the sub menu) and a height of auto on the sub menu. Note the ul li:hover, meaning these styles only apply when the first level of list items are hovered over. This might seem weird now, but it'll hopefully make sense with the styles we make use of in a bit. Next up we just give the links some padding, which is highly preferable to giving the list item padding because then you can end up with a small hitbox for the actual link and a bunch of dead space around it. Only other thing to note here is the display block on the link which is required for the absolute positioning used later. The .sub-menu styles are pretty basic, just give it a position of absolute and then top: 100%, left: 0 and width: 100% to make it sit flush below the first level of list items. Finally throw on a transition to really allow the animation to shine, and fine tune the timing if you'd like. Still on the .sub-menu we give it a max-height of 0 and overflow: hidden. What this does is it hides the element from our view, similar to display:none or visibility:hidden... but for our animation we have to do it this way! Lastly we give the sub menu list items and links a display of block and some colors because pretty. That's it, you've now got a simple dropdown navigation with a neat little animation! You can add a height of 0 to the ul .sub-menu as well for a slightly different effect, or play around with the transition time and effect. Much to the same effect, increasing the value of the max-height on the sub menu hover will have an effect on the time it takes the dropdowns to make it to the end. In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library that allows you to handle some common functionality such as pop-up dialogs and other UI features. In this article we go over the steps to use Jquery-ui to display a pop-up on your page with a LoginRadius login interface using the LoginRadius HTML SDK. 1. Get the required references this guide relies on: Jquery and Jquery-ui. You can include the hosted reference files in the header of your page: 2. Include the LoginRadius Interface Javascript and HTML5 SDK reference: 3. Create the HTML structure for your page. Below we have created a button to trigger our pop-up display as well as the dialog container that will be displayed in the custom pop-up which is hidden by default. We have also included a div to display profile data after successfully authenticating. 4. Create a JavaScript function to handle the display of the pop-up dialog. The below function utilizes Jquery-ui functions to display the dialog and the LoginRadius login interface initialization function to render the login interface on the popup: 5. Include the JavaScript callback script to handle a successful authentication and display the profile data. Full Example: Whatâs up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using CSS sprites. On top of that, we will also add a fallback for browsers that do not support SVG files. SVG - Stands for Scalable Vector Graphics. In short it scales perfectly and you donât need to worry about having a pixelated image anymore. Sprite - Google said itâs a fairy. This is not a fairy. Itâs just a bunch of different icons in 1 image. Use it as background image and shift the positioning to show 1 icon. This saves you a lot of loading time. Because instead of loading, say 10 images, youâre loading just 1. CSS - Cascading Style Sheet. If you donât know what this is, I have bad news for ya. First things first, we need a sprite image that consists four icons â or more, itâs up to you. Luckily, I have one in my digital pocket. Weâre just going to use a normal PNG file at first and change it later. Make sure it has a transparent background. Now, letâs make their placeholder. The icons you see above is using a grid of 32px by 32px and itâs lining up vertically. I made it like that so itâs easier to find anything, youâll see why later. Now we need to style them. Explanation Looks simple right? But the one thing thatâs very important here is the background-size, which makes our sprite responsive. When you put 100% as the value, it will stretch the image depending on what width and height you have. So, be very careful when putting a value on both X and Y axis, because this will distort the image. To stop it from distorting, you should only put a value on one axis and put the other on âautoâ so the image scales proportionally. If you look at the image I provided, thereâs only one icon on X-axis. That means we can just say 100% on X and auto on Y. So, we get background-size: 100% auto. Cool, right? No crazy percentage. Your icon should look like this: Itâs time to map those icons properly. Facebook is not a problem because itâs first on the list. But for defaults sake, letâs add a code for it. The positioning of 0 0 will map it to the top left of the element. For the background-color, you can get almost all of the official social icon colors in hex here. How about the rest? Well, thereâs a simple formula for that. Since weâre making this responsive, we need to use percentage. We need to get the height of the image via percentage. Remember what I said earlier about x and y and scaling proportionally? Since the icons are lined up vertically, we need to get the Y-axis, which is the height. The easy way to do that is to just use 100% and never touch x axis again. Now, we have to get the position of the icons. Letâs start by counting the icons starting with 0 (zero). 0 = Facebook 1 = Google 2 = LinkedIn 3 = Twitter Facebook isnât really a problem because we already know where it is. So, letâs exclude it from the count. That gives us 3 icons. We can now use those numbers to get the icon position. imageHeight = 100% -imageHeight / iconCount * iconPosition If you use stylus you can just do this: Then call it. By now your icon should look like this. Weâve now added some CSS for the overlay and the popup. At this point, we can see a white box above our grey overlay. Weâve added an h1 tag inside our popup a page title and some main page content. We should now see something like this: Next let's add a control to close this popup. Weâll add a span containing an X that we can click on to close this popup and JavaScript to handle this event. Now we can close this popupâŚ. Ah, thatâs nice. Here weâve added our X to click on, some CSS to style this close area. Also, weâve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. Youâll notice that the popup is displayed when we first open the page. Let's hide this with CSS on load so that we have to do something to open it. After adding display: none; to our overlay and popup, youâll notice that when you load the page in your browser we cannot see them. To show this popup weâll have to do something, so letâs make a button to click on and some JavaScript to handle this event. Weâve added a button in our main content area. To show the popup weâve added a JavaScript function to change the overlay and our popup to Demo: See the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen. Please post your questions or feedback in the comment area.
\n
\n
\n
\n<!--\n\n-->
\n<!--\nvar options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n $ui = LoginRadius_SocialLogin.lr_login_settings;\n $ui.interfacesize = "";\n $ui.apikey = "";\n $ui.callback="";\n $ui.lrinterfacecontainer ="interfacecontainerdiv";\n LoginRadius_SocialLogin.init(options);\n});\n-->
\n<!--Login\n\n \n\n -->
\nfunction Login(){\n $( "#dialog" ).dialog();\n LoginRadius_SocialLogin.init(options);\n}
\nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n LoginRadiusSDK.getUserprofile( function( data) {\n $( "#dialog" ).dialog("close");\n document.getElementById("profile").innerHTML = JSON.stringify(data);\n });\n}
\n","frontmatter":{"date":"November 09, 2015","updated_date":null,"title":"Displaying the LoginRadius interface in a pop-up","tags":["HTML","Login","UI","LoginRadius Interface"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/af7b348bc73adfcd737b8df292359566/6d161/simplepop-150x150.png","srcSet":"/static/af7b348bc73adfcd737b8df292359566/6d161/simplepop-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/css3-responsive-icons/"},"html":"<!--\n\n\n\n\n var options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n$ui = LoginRadius_SocialLogin.lr_login_settings;\n$ui.interfacesize = "";\n$ui.apikey = "";\n$ui.callback="";\n$ui.lrinterfacecontainer ="interfacecontainerdiv";\nLoginRadius_SocialLogin.init(options); }); \n\n\n \nfunction Login(){\n $( "#dialog" ).dialog();\n LoginRadius_SocialLogin.init(options);\n}\n \nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n LoginRadiusSDK.getUserprofile( function( data) {\n $( "#dialog" ).dialog("close");\n document.getElementById("profile").innerHTML = JSON.stringify(data);\n });\n}\n \nLogin\n \n\n \n-->Quick FAQ.
\nLet's Begin
\n
\n</pre>\n <div class="frame"></div>\n<pre>
\n.icon {\n width: 32px;\n height: 32px;\n background: #eee;\n float: left;\n background-image: url("[ put your image here ]");\n background-size: 100% auto;\n /*extra fluff*/\n margin: 10px;\n border-radius: 5px;\n}
\n .icon.facebook {\n background-position: 0 0;\n background-color: #3b5998;\n }The raw CSS way
\n
\niconCount = 3
\niconPosition = [1, Â 2 or 3]
\nWe need to go downwards on the sprite. That means itâs negative.
\n-100% / 3 / 1 = 33.33% is Googleâs position
\n-100% / 3 / 2 = 66.66% is LinkedInâs position
\n-100% / 3 / 3 = 99.99% is Twitterâs position
\nThat gives us this code
\n.icon.twitter {\n background-position: 0 -33.33%;\n background-color: #55acee;\n}\n.icon.linkedin {\n background-position: 0 -66.66%;\n background-color: #007bb6\n}\n.icon.google {\n background-position: 0 -99.99%;\n background-color: #F90101;\n}The Stylus way
\n
\nCreate the mixin
\ngetPos(imageHeight, iconCount, iconPosition)\n imageHeight / iconCount * iconPosition
\n.icon.twitter\n background-position 0 getPos(-100%, 3, 1)\n background-color #55acee\n \n.icon.linkedin\n background-position 0 getPos(-100%, 3, 2)\n background-color #007bb6\n \n.icon.google\n background-position 0 getPos(-100%, 3, 3)\n background-color #F90101
\n<html>\n<head>\n <title>A Simple Popup</title>\n <style>\n #overlay {\n position: absolute;\n top: 0;\n bottom: 0;\n background: #999;\n width: 100%;\n height: 100%;\n opacity: 0.8;\n z-index: 100;\n }\n\n #popup {\n position: absolute;\n top: 50%;\n left: 50%;\n background: #fff;\n width: 500px;\n height: 500px;\n margin-left: -250px; /*Half the value of width to center div*/\n margin-top: -250px; /*Half the value of height to center div*/\n z-index: 200;\n }\n </style>\n</head>\n<body>\n<div id="maincontent">\n <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n <div class="popupcontent">\n <h1>Some Popup Content</h1>\n </div>\n</div>\n</body>\n</html>
\n<html>\n<head>\n <title>A Simple Popup</title>\n <style>\n #overlay {\n position: absolute;\n top: 0;\n bottom: 0;\n background: #999;\n width: 100%;\n height: 100%;\n opacity: 0.8;\n z-index: 100;\n }\n\n #popup {\n position: absolute;\n top: 50%;\n left: 50%;\n background: #fff;\n width: 500px;\n height: 500px;\n margin-left: -250px; /*Half the value of width to center div*/\n margin-top: -250px; /*Half the value of height to center div*/\n z-index: 200;\n }\n\n #popupclose {\n float: right;\n padding: 10px;\n cursor: pointer;\n }\n </style>\n</head>\n<body>\n<div id="maincontent">\n <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n <div class="popupcontrols">\n <span id="popupclose">X</span>\n </div>\n <div class="popupcontent">\n <h1>Some Popup Content</h1>\n </div>\n</div>\n<script type="text/javascript">\n // Initialize Variables\n var closePopup = document.getElementById("popupclose");\n var overlay = document.getElementById("overlay");\n var popup = document.getElementById("popup");\n \n // Close Popup Event\n closePopup.onclick = function() {\n overlay.style.display = 'none';\n popup.style.display = 'none';\n };\n</script>\n</body>\n</html>
\n#overlay {\n display: none;\n ...\n}\n \n#popup {\n display: none;\n ...\n}
\n<html>\n<head>\n <title>A Simple Popup</title>\n <style>\n\t#overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: #999;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.8;\n\t\tz-index: 100;\n\t}\n\n\t#popup {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tbackground: #fff;\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tmargin-left: -250px; /*Half the value of width to center div*/\n\t\tmargin-top: -250px; /*Half the value of height to center div*/\n\t\tz-index: 200;\n\t}\n\n\t#popupclose {\n\t\tfloat: right;\n\t\tpadding: 10px;\n\t\tcursor: pointer;\n\t}\n\n\t.popupcontent {\n\t\tpadding: 10px;\n\t}\n\n\t#button {\n\t\tcursor: pointer;\n\t}\n </style>\n</head>\n<body>\n<div id="maincontent">\n <h1>Page Content<h2>\n <button id="button">Show Popup</button>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n <div class="popupcontrols">\n <span id="popupclose">X</span>\n </div>\n <div class="popupcontent">\n <h1>Some Popup Content</h1>\n </div>\n</div>\n<script type="text/javascript">\n\t// Initialize Variables\n\tvar closePopup = document.getElementById("popupclose");\n\tvar overlay = document.getElementById("overlay");\n\tvar popup = document.getElementById("popup");\n\tvar button = document.getElementById("button");\n\t// Close Popup Event\n\tclosePopup.onclick = function() {\n\t overlay.style.display = 'none';\n\t popup.style.display = 'none';\n\t};\n\t// Show Overlay and Popup\n\tbutton.onclick = function() {\n\t overlay.style.display = 'block';\n\t popup.style.display = 'block';\n\t}\n</script>\n</body>\n</html>display:block; on event onclick. After making these changes click on your button to open your popup.