Responsive Accordion with HTML, CSS & jQuery

Create an responsive Accordion with CSS3, HTML5 and jQuery. Accordion toggle is the latest style of toggle. Accordion is mostly using for FAQ and design features. This kind of toggle is make the web page as very attractive ,simple and include more content. Here HTML, CSS & jQuery for accordion. Accordions are mainly used to toggle extra information. They help to organize and de-clutter information.

• The HTML
• The CSS






• The jQuery

The layout is pretty. class ‘content white’ used for style full menu and class ‘accordion-container’, style each accordion menu. The class=’accordion-toggle’ will be the “link(a)” for the accordion. The element that comes directly after that will be the element being toggled by clicking on the previous ‘a’ href in class ‘accordion-container’. Toggled div contain image, paragraph,div all html tags.

		
	

		
Responsive jQuery Accordions 
		

				Live html compiler using PHP 
				

					
					
	Live HTML compiler using PHP is very simple one like as w3schools editor. In here we are going to run the textarea code in the iframe.
						Main difference from w3schools try editor,the w3schools try editor used asp.net but, here PHP with iframe is used.
						Visitors are need to edit their code for their own need, and they want to check it lively HTML live compiler support this operation.
					
					
We have two files for this opeation .demo_html_compiler.html(Put the php code) and demo_html_compiler.php (The action will performs,get the code from demo_html_compiler.html and respond in iframe.)
				
		
		
		

				Geoloaction in form input type
				

					
					
Here I’m going to tell you interesting topic regarding google map application in web development. Most of the website need googlemap location while we are entering location name, for that we have one solution. Here I explain,when we are entering the location name in input type you will get the map for that particular location by using jquery. It’s very simple and can use in your web development application, this will helps for all the e-commerce site.I hope this concept is really helpful for all developer.
				
		
		
		

			Popup the image gallery with form
				

					
					
Popup the image with enquiry form using CSS,jquery and javascript in html or php page.
						This is simple, can edit style, image,form etc.To use it in a real life project like ecommerce website, the customers can post feedbacks as comments in specified product.$(“.mylink”).on(“click”, function (e) { } helps to popup the window with image and form on click.
				
		
		
	
		

			Responsive Navigation Menu Using Only CSS
			

				
					
Responsive menus are built to work with desktop browsers as well as touch and mobile devices.
					In here the dropdown menu also available in all device using pure CSS. A pure CSS responsive menu created that automatically changes to a toggleable dropdown menu at a specified breakpoint based on CSS3 media queries.
					If you are having trouble getting your website menu working on an iPhone, iPad, or Android device, then check out these menus.
			
		
		

			Ten Open Source Backup and Recovery Tools
			

				
				
In the data center environment the open source tools have many advantages. First and foremost is their low cost and the flexibility they provide. Everyone will be aware of the source code so any enhancements that need to be done have a greater chance of getting implemented, quickly.
					
Ten FOSS backup tools
					

						
AMANDA
						
Bacula
						
Bareos
						
Clonezilla
						
FOG
						
Rsync
						
BURP
						
Duplicati
						
BackupPC
						
Box Backup
					
				

			
		
	
	

The CSS is just doing some basic styling.

It’s really amazing at how simple jQuery can make our lives. This is all that is required for the accordion: