Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में FAQs content को search input से कैसे filter या search box में search किये गए input के आधार पर FAQs content को filter कैसे करेंगे उसके बारेमे जानेगे!.
FAQs content filter using javascript
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Programming Language FAQs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.faq { margin-bottom: 10px; }
input#searchInput { margin-bottom: 50px; }
h5.faq-title { padding: 12px 7px; border: 1px solid #599959; }
.faq h5 { margin: 0; }
.faq p { margin: 0; }
.faq-content { display: none; }
.faq-title:hover { cursor: pointer; }
.faq-content.show {
border: 1px solid #eee;
padding: 15px;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h3>Seaching FAQs content using javascript</h3>
<div class="form-group">
<label for="name">Seach FAQs:</label>
<input type="text" id="searchInput" class="form-control" placeholder="Search FAQs">
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a programming language?">
What is a programming language?
</h5>
<div class="faq-content">
<p>A programming language is a formal language with a set of rules and syntax used to write computer programs that can be executed by a computer.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What are the types of programming languages?">
What are the types of programming languages?
</h5>
<div class="faq-content">
<p>Programming languages can be categorized into several types, including procedural, object-oriented, functional, scripting, and markup languages.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between a compiled and an interpreted programming language?">What is the difference between a compiled and an interpreted programming language?</h5>
<div class="faq-content">
<p>Compiled languages are translated into machine code before execution, while interpreted languages are executed line by line without a separate compilation step.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="Which programming language is the most popular?">Which programming language is the most popular?</h5>
<div class="faq-content">
<p>Currently, some of the most popular programming languages include JavaScript, Python, Java, C++, and C#.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between static and dynamic typing?">What is the difference between static and dynamic typing?</h5>
<div class="faq-content">
<p>Static typing requires declaring variable types explicitly, while dynamic typing allows the type of a variable to be determined at runtime.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is an IDE?">What is an IDE?</h5>
<div class="faq-content">
<p>An Integrated Development Environment (IDE) is a software application that provides comprehensive tools for writing, debugging, and testing code.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a syntax error?">What is a syntax error?</h5>
<div class="faq-content">
<p>A syntax error occurs when the code violates the rules and structure of the programming language, making it unable to be parsed or executed.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is an API?">What is an API?</h5>
<div class="faq-content">
<p>An Application Programming Interface (API) defines a set of rules and protocols that allows different software applications to communicate and interact with each other.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is object-oriented programming (OOP)?">What is object-oriented programming (OOP)?</h5>
<div class="faq-content">
<p>OOP is a programming paradigm based on the concept of objects, which encapsulate data and behavior, and interact with each other through methods and messages.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text=" What is the difference between procedural and object-oriented programming?"> What is the difference between procedural and object-oriented programming?</h5>
<div class="faq-content">
<p>Procedural programming focuses on procedures or functions, while object-oriented programming emphasizes the use of objects and their interactions.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is recursion in programming?">What is recursion in programming?</h5>
<div class="faq-content">
<p>Recursion is a technique in which a function calls itself during its execution, allowing problems to be solved by breaking them into smaller, similar subproblems.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a database?">What is a database?</h5>
<div class="faq-content">
<p> A database is a structured collection of data organized and stored in a way that allows efficient storage, retrieval, and manipulation of information.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is SQL?">What is SQL?</h5>
<div class="faq-content">
<p>Structured Query Language (SQL) is a programming language used for managing and manipulating relational databases.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is version control?">What is version control?</h5>
<div class="faq-content">
<p>Version control is a system that tracks and manages changes to files and code over time, allowing multiple developers to collaborate on a project effectively.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a framework?">What is a framework?</h5>
<div class="faq-content">
<p> A framework is a reusable set of libraries, components, and tools that provides a foundation for building applications in a specific programming language.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is debugging?">What is debugging?</h5>
<div class="faq-content">
<p>Debugging is the process of identifying and fixing errors or bugs in software code to ensure correct program execution.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is multithreading?">What is multithreading?</h5>
<div class="faq-content">
<p>Multithreading is a programming technique that allows multiple threads of execution to run concurrently within a single program.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is an algorithm?">What is an algorithm?</h5>
<div class="faq-content">
<p>An algorithm is a step-by-step procedure or a set of instructions for solving a specific problem or performing a particular task.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a variable?">What is a variable?</h5>
<div class="faq-content">
<p> A variable is a named container used to store data values that can be manipulated or accessed throughout the program.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between a function and a method?">What is the difference between a function and a method?</h5>
<div class="faq-content">
<p>A function is a self-contained block of code that performs a specific task, while a method is a function associated with an object or a class.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between synchronous and asynchronous programming?">What is the difference between synchronous and asynchronous programming?</h5>
<div class="faq-content">
<p>Synchronous programming executes tasks sequentially, while asynchronous programming allows tasks to run independently, enabling non-blocking operations.</p>
</div>
</div>
</div>
<!-- Repeat the above structure for other FAQs -->
</body>
</html>
Javascript code:
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqs = document.querySelectorAll('.faq');
// Add click event listener to each FAQ
faqs.forEach(function(faq) {
const title = faq.querySelector('.faq-title');
const content = faq.querySelector('.faq-content');
title.addEventListener('click', function() {
// Toggle the visibility of the content
content.classList.toggle('show');
});
});
/* FAQ seaching */
const searchInput = document.getElementById('searchInput');
// Add event listener to the search input
searchInput.addEventListener('input', function() {
const searchTerm = searchInput.value.toLowerCase();
for (let i = 0; i < faqs.length; i++) {
const title = faqs[i].querySelector('.faq-title').getAttribute('data-filter_text').toLowerCase();
//const content = faqs[i].getAttribute('data-content').toLowerCase();
if ( title.includes(searchTerm) ) {
faqs[i].style.display = 'block'; // Show FAQ
} else {
faqs[i].style.display = 'none'; // Hide FAQ
}
}
});
});
</script>
ऊपर के javascript code में देख सकते है की faq के title पर click करने पर faq content को open करा है!. document.getElementById(‘searchInput’); से input searchInput field javascript के में get किया गया है और इसके बाद search input field के input के आधार faq content को filter किया जाता है!.
FAQs content filter using javascript example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Programming Language FAQs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.faq { margin-bottom: 10px; }
input#searchInput { margin-bottom: 50px; }
h5.faq-title { padding: 12px 7px; border: 1px solid #599959; }
.faq h5 { margin: 0; }
.faq p { margin: 0; }
.faq-content { display: none; }
.faq-title:hover { cursor: pointer; }
.faq-content.show {
border: 1px solid #eee;
padding: 15px;
background-color: green;
color: white;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqs = document.querySelectorAll('.faq');
// Add click event listener to each FAQ
faqs.forEach(function(faq) {
const title = faq.querySelector('.faq-title');
const content = faq.querySelector('.faq-content');
title.addEventListener('click', function() {
// Toggle the visibility of the content
content.classList.toggle('show');
});
});
/* FAQ seaching */
const searchInput = document.getElementById('searchInput');
// Add event listener to the search input
searchInput.addEventListener('input', function() {
const searchTerm = searchInput.value.toLowerCase();
for (let i = 0; i < faqs.length; i++) {
const title = faqs[i].querySelector('.faq-title').getAttribute('data-filter_text').toLowerCase();
//const content = faqs[i].getAttribute('data-content').toLowerCase();
if ( title.includes(searchTerm) ) {
faqs[i].style.display = 'block'; // Show FAQ
} else {
faqs[i].style.display = 'none'; // Hide FAQ
}
}
});
});
</script>
</head>
<body>
<div class="container">
<h3>Seaching FAQs content using javascript</h3>
<div class="form-group">
<label for="name">Seach FAQs:</label>
<input type="text" id="searchInput" class="form-control" placeholder="Search FAQs">
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a programming language?">
What is a programming language?
</h5>
<div class="faq-content">
<p>A programming language is a formal language with a set of rules and syntax used to write computer programs that can be executed by a computer.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What are the types of programming languages?">
What are the types of programming languages?
</h5>
<div class="faq-content">
<p>Programming languages can be categorized into several types, including procedural, object-oriented, functional, scripting, and markup languages.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between a compiled and an interpreted programming language?">What is the difference between a compiled and an interpreted programming language?</h5>
<div class="faq-content">
<p>Compiled languages are translated into machine code before execution, while interpreted languages are executed line by line without a separate compilation step.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="Which programming language is the most popular?">Which programming language is the most popular?</h5>
<div class="faq-content">
<p>Currently, some of the most popular programming languages include JavaScript, Python, Java, C++, and C#.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between static and dynamic typing?">What is the difference between static and dynamic typing?</h5>
<div class="faq-content">
<p>Static typing requires declaring variable types explicitly, while dynamic typing allows the type of a variable to be determined at runtime.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is an IDE?">What is an IDE?</h5>
<div class="faq-content">
<p>An Integrated Development Environment (IDE) is a software application that provides comprehensive tools for writing, debugging, and testing code.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a syntax error?">What is a syntax error?</h5>
<div class="faq-content">
<p>A syntax error occurs when the code violates the rules and structure of the programming language, making it unable to be parsed or executed.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is an API?">What is an API?</h5>
<div class="faq-content">
<p>An Application Programming Interface (API) defines a set of rules and protocols that allows different software applications to communicate and interact with each other.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is object-oriented programming (OOP)?">What is object-oriented programming (OOP)?</h5>
<div class="faq-content">
<p>OOP is a programming paradigm based on the concept of objects, which encapsulate data and behavior, and interact with each other through methods and messages.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text=" What is the difference between procedural and object-oriented programming?"> What is the difference between procedural and object-oriented programming?</h5>
<div class="faq-content">
<p>Procedural programming focuses on procedures or functions, while object-oriented programming emphasizes the use of objects and their interactions.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is recursion in programming?">What is recursion in programming?</h5>
<div class="faq-content">
<p>Recursion is a technique in which a function calls itself during its execution, allowing problems to be solved by breaking them into smaller, similar subproblems.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a database?">What is a database?</h5>
<div class="faq-content">
<p> A database is a structured collection of data organized and stored in a way that allows efficient storage, retrieval, and manipulation of information.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is SQL?">What is SQL?</h5>
<div class="faq-content">
<p>Structured Query Language (SQL) is a programming language used for managing and manipulating relational databases.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is version control?">What is version control?</h5>
<div class="faq-content">
<p>Version control is a system that tracks and manages changes to files and code over time, allowing multiple developers to collaborate on a project effectively.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a framework?">What is a framework?</h5>
<div class="faq-content">
<p> A framework is a reusable set of libraries, components, and tools that provides a foundation for building applications in a specific programming language.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is debugging?">What is debugging?</h5>
<div class="faq-content">
<p>Debugging is the process of identifying and fixing errors or bugs in software code to ensure correct program execution.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is multithreading?">What is multithreading?</h5>
<div class="faq-content">
<p>Multithreading is a programming technique that allows multiple threads of execution to run concurrently within a single program.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is an algorithm?">What is an algorithm?</h5>
<div class="faq-content">
<p>An algorithm is a step-by-step procedure or a set of instructions for solving a specific problem or performing a particular task.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is a variable?">What is a variable?</h5>
<div class="faq-content">
<p> A variable is a named container used to store data values that can be manipulated or accessed throughout the program.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between a function and a method?">What is the difference between a function and a method?</h5>
<div class="faq-content">
<p>A function is a self-contained block of code that performs a specific task, while a method is a function associated with an object or a class.</p>
</div>
</div>
<div class="faq">
<h5 class="faq-title" data-filter_text="What is the difference between synchronous and asynchronous programming?">What is the difference between synchronous and asynchronous programming?</h5>
<div class="faq-content">
<p>Synchronous programming executes tasks sequentially, while asynchronous programming allows tasks to run independently, enabling non-blocking operations.</p>
</div>
</div>
</div>
<!-- Repeat the above structure for other FAQs -->
</body>
</html>
