How to create a responsive accordion with html and css Accordions are useful when you want to toggle between hiding and showing large amount of content. We will create accordion with very simple and easy way. Here is the code <! DOCTYPE html > < html > < head > < style > button.accordion { background-color : #cb4d4d; color : #fff; cursor : pointer; padding : 18px ; width : 100% ; border : none; text-align : left; outline : none; font-size : 15px ; transition : 0.4s ; } button.accordion.active , button.accordion:hover { background-color : #7d1e1e; } button.accordion:after { /* Unicode character...
How to create a list group with css and html We will create a responsive and very simple list group with css and html. We will design a beautiful header with hoverable lists. Here is the list group Here is the source code <! DOCTYPE html > < html > < head > < title ></ title > < style type = "text/css" > .group-list { width : 100% ; height :auto; padding : 0 ; margin : 0 ; border-top : 1px solid #ddd ; border-left : 1px solid #ddd ; border-right : 1px solid #ddd; border-radius : 2px ; box-shadow : 0 0 2px 2px rgba( 0 , 0 , 0 , 0.1 ); } .group-list:first-child a { border-top-left-radius : 2px ; border-top-right-radius : 2px ; } .group-list:last-child a { border-bottom-left-radius : 2px ; border-bottom-right-radius : 2px ; } .group-list .header { background :#d32f2f ; color :#fff; } .group-list .h...
Functions and Scope Functions are essential building blocks in JavaScript, allowing you to encapsulate reusable blocks of code. Understanding functions and scope is crucial for writing efficient and maintainable code. Let's explore these concepts in detail: Declaring and Invoking Functions: In JavaScript, you can declare functions using the function keyword. Functions can take parameters and return values. Here's an example of declaring and invoking a function: // Function declaration function greet(name) { return "Hello, " + name + "!"; } // Function invocation let message = greet("John"); console.log(message); // Output: Hello, John! Understanding Scope and Closures: Scope determines the visibility and lifetime of variables in JavaScript. JavaScript has function scope, meaning variables defined within a function are only accessible within that function. Closures are an important concept in JavaScript, referring to the abil...
Comments
Post a Comment