Categories
28°C, New York
Home Javascript Example 2

Example 2

Output:

Output:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
  
    <div class="container">
        <h1>w3wiki</h1>
        <p>Best Programming Languages</p>
        <ul class="accordion" data-accordion>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">Java</a>
                <div class="accordion-content" data-tab-content>
                    Java is a high-level, class-based, 
                    object-oriented programming language 
                    that is designed to have asfew 
                    implementation dependencies as possible.
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">Python</a>
                <div class="accordion-content" data-tab-content>
                    Python is a high-level, general-purpose 
                    programming language. Its design philosophy 
                    emphasizes code readability with the use of 
                    significant indentation via the off-side rule.
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">C++</a>
                <div class="accordion-content" data-tab-content>
                    C++ was designed with systems programming 
                    and embedded, resource-constrained software 
                    and large systems in mind, with performance, 
                    efficiency, and flexibility of use as its 
                    design highlights.
                </div>
            </li>
        </ul>
    </div>
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/vendor/what-input.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js">
    </script>
    <script src="script.js"></script>
</body>
  
</html> 






                        









CSS














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















.container { 


    margin: 20px; 


} 


h1 { 


    color: green; 


}



















                        







                        









Javascript














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















$(document).foundation();



















                        







                        









													
													
												

												
												

													
													
    

  • This example demonstrates the basic usage of the Foundation’s accordion component. The example uses the Foundation CSS framework for styling and the Foundation JavaScript files to initialize the accordion functionality.
    • 


													
													
												

												
											

											
											

												
Foundation CSS JavaScript Utilities

												
												

													
													
Foundation JavaScript Utilities is a collection of tools that can be used to enhance the functionality of your Foundation website. To use Foundation JavaScript Utilities, you first need to include the foundation.js file in your website. Once you have done this, you can use the various utilities by calling the corresponding function. For example, to create a custom animation, you would use the Foundation.Move() function.

													
													
												

												
											

										


										
										

											
Similar Reads

											
											

												
													

														Syntax

													

														The syntax for calling a Foundation JavaScript Utility function is as follows:...
													

												
											

											
											

												
													

														Selector Engine

													

														The Foundation framework uses its own selector engine called “Big S”. It is based on the native browser API querySelectorAll(), but it is optimized for performance. Foundation’s Big S selector engine is about 20% faster than jQuery’s selector engine.
To use Foundation’s Big S selector engine, you can use the s() function. For example, the following code would return a list of all the 

											
											

												
													

														Throttle and Debounce

													

														Throttle and debounce are two techniques used to prevent a function from being called too often.
Throttle: Throttling is a technique where you control the frequency of function execution. It ensures that the function doesn’t execute more than once every X milliseconds.
Debounce: Debouncing is a technique where you ensure that a function doesn’t execute until after a certain amount of time has passed since it was called.
In the Foundation framework, throttle and debounce are implemented using the Foundation.Throttle() and Foundation.Debounce() functions. The syntax for both functions is the same:
Foundation.[Throttle/Debounce](functionToThrottleOrDebounce, waitTime, [callback]);...
													

												
											

											
											

												
													

														Data Options

													

														Data Options allow you to customize the behavior of certain Foundation components and plugins directly from the HTML markup.
To use data options, you add data attributes to the element that you want to configure. The data attributes have the following format:
data-[plugin-name]-[option-name]="[value]"...
													

												
											

											
											

												
													

														Media Queries

													

														Media queries in the Foundation framework are used to change the behavior of Foundation components based on the size of the viewport. They are typically used to change the layout of a component or to add or remove functionality.
To use media queries, you add media queries to the CSS rules that you want to apply to a Foundation component. The media queries have the following format:
@media [media query] {    [CSS rules]}...
													

												
											

											
											

												
													

														Example 1:

													

														HTML







                                    

                                    
                                    

                                    

                                    
                                    
                                    
                                










 
 
  
 
     
     
    Foundation JS Utilities Example 
     
     
 
  
 
  
    
 
        
 
             
        
 
    
 
  
     
     
     
 
  
 










                        



                        




CSS







                                    

                                    
                                    

                                    

                                    
                                    
                                    
                                










.top-bar, .top-bar ul { 
    background-color: white; 
} 
.menu{ 
    color: green; 
} 
a,ul,li{ 
    color: black; 
} 
a:hover{ 
    color: green; 
} 
ul:hover{ 
    color: green; 
} 
li:hover{ 
    color: green; 
}










                        



                        




Javascript







                                    

                                    
                                    

                                    

                                    
                                    
                                    
                                










$(document).foundation();...
													

												
											

											
											

												
													

														Output:

													

														...
													

												
											

											
											

												
													

														Example 2:

													

														...
													

												
											

											
											

												
													

														Output:

													

														...
													

												
											

											
										


									

									

										
Tags:

										
										#Foundation
										
										#Foundation-Setup
										
										#CSS
										
										#Web Technologies
										

									

									

										

											
											
												
												Output:
											
											
										

										

											
											
												Output: