In the last article we started our discussion regarding W3CSS panels. We saw how to create simple panels and how to create notes and quotes effect via panels. In this article we shall study W3CSS closing and opening panels. But before that we shall see how to create rounded panels. So, let’s get our hands dirty!
Creating rounded panel is extremely simple. You just have to add the class w3-round-size, where you have to replace size with the roundness size you want. For instance if you want large rounded border you can use w3-round-xxlarge as in the following example. Take a look at it.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> </head> <body> <div class="w3-panel w3-purple w3-round-xxlarge"> <h2>This is a rounded panel</h2> <p>It has purple background!<p> </div> </html>
If you open the above page in browser, you should see a purple panel with rounded corners.
The following example is probably the trickiest example of the article. Here we have a button whose onclick event opens a div with id “paneldiv”. This button basically opens a panel. Similarly, if you look at the panel div, here first element is the span tag with class “w3-closebtn”, the onclick event of this span tag sets the display property of the parent div i.e panel div to none, which hides the panel. By default the panel div’s display property is set to none. Take a look at the following code.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> </head> <body> <button class="w3-btn w3-green" onclick="document.getElementById('paneldiv').style.display='block'">Show Blue Panel</button> <div id="paneldiv" class="w3-panel w3-blue" style="display:none"> <span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span> <h2>This is a panel</h2> <p>It has blue background!<p> </div> </html>
Now if you open the above page in browser, you should see a green button which reads “Show Blue Panel”. If you click the button the blue panel appears. Notice that blue panel has a cross button at top right corner, clicking the cross closes the panel. You can again, open the panel clicking the green button and so on.
Panels are extremely useful for a variety of purposes. In the next article, we shall see W3CSS cards.