Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JQuery Only Show One Div On Click And Close Other Divs

JQuery Only Show One Div On Click And Close Other Divs

For example, we have a Frequently Asked Questions (FAQs) page that shows a list of questions and answers; we want to show only answer’s clicked question and hide others.

Only Show One Div On Click And Close Other Divs

In this example, we can use JQuery Toggle with a few changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Only Show One Div On Click And Close Other Divs</title>
<meta name="robots" content="noindex, nofollow" />
<!-- Add jQuery library -->
<script type="text/javascript" src="jquery-latest.min.js"></script>
 
<style>
.opsgreat_toggle:hover {
    cursor: pointer;
}
</style>
 
<script language="javascript">
	$(document).ready(function () {
		$(".opsgreat_toggle_content").hide();
		$( ".opsgreat_toggle").click(function() {
			$(".opsgreat_toggle_content").hide();
			$(this).next(".opsgreat_toggle_content").toggle( "slow" );
		});
	});
</script>
</head>
 
<body>
<h4 class="opsgreat_toggle">Cras rutrum vulputate massa. Fusce pharetra nisl at quam gravida</h4>
<div class="opsgreat_toggle_content">
<ul>
<li style="text-align: justify;">Vivamus consectetur erat sed ex fringilla, eu hendrerit elit semper</li>
<li style="text-align: justify;">In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam volutpat vel nisl sed pretium. Maecenas lacinia magna sed erat mollis, ut imperdiet risus imperdiet. In eget leo nulla. Duis risus tortor, blandit ac eros non, commodo viverra dolor. Maecenas non mi rutrum, posuere nunc non, aliquam tellus.</li>
<li style="text-align: justify;">Proin elementum tincidunt maximus. Duis euismod, magna quis tristique malesuada, tortor tellus malesuada metus, eget bibendum lacus ante eget nisl. Integer eros sapien, varius sed tellus sit amet, vehicula pharetra erat.</li>
</ul>
</div>
<h4 class="opsgreat_toggle">Curabitur consequat, arcu ac molestie cursus, turpis erat imperdiet quam, vitae placerat metus odio eu lacus</h4><div class="opsgreat_toggle_content"><ul>
<li style="text-align: justify;">Phasellus sapien elit, pharetra sed convallis lacinia, iaculis sit amet neque. Curabitur gravida erat sit amet lacus imperdiet, sit amet facilisis nibh pretium. Etiam fringilla purus eget dolor consectetur, non maximus velit luctus. Phasellus pulvinar diam sapien, dictum accumsan ex suscipit et. Nam vestibulum purus et nulla condimentum ornare. Sed et volutpat diam. Mauris consequat aliquam orci, in tempus leo hendrerit vitae.</li>
<li style="text-align: justify;">Nulla bibendum odio vestibulum bibendum sollicitudin. Ut et tincidunt magna, at efficitur ipsum.</li>
<li style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae dapibus augue.</li>
</ul>
</div>
<h4 class="opsgreat_toggle">Nulla in lobortis erat. Vestibulum efficitur quam sed ullamcorper vulputate.</h4>
<div class="opsgreat_toggle_content">
Sed quis massa ac sapien dictum convallis quis vulputate tellus. Proin venenatis pretium elementum. Mauris erat libero, porta vitae aliquet non, pulvinar eu ligula. Suspendisse mattis rhoncus magna molestie congue. Vivamus eget ipsum commodo, molestie dolor at, euismod dui. Duis condimentum orci metus, et mollis neque scelerisque eget. Praesent vitae tristique eros. Cras tempor nulla odio, vitae pretium dui imperdiet vel. 
</div>
<h4 class="opsgreat_toggle">Etiam quis nisl ut quam iaculis porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae nisi sodales, viverra nibh non, vehicula urna.</h4>
<div class="opsgreat_toggle_content">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dui massa, iaculis at efficitur volutpat, posuere in ipsum. Fusce dignissim nisl enim, vel congue tortor bibendum vel. Curabitur ut nulla dignissim, venenatis urna vitae, lobortis neque. Mauris at tincidunt ipsum. Phasellus et nulla turpis. Nulla sed nisi risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet molestie dolor. Vestibulum semper enim consequat tempor congue. Nullam a eros bibendum, dapibus augue at, accumsan diam. 
</div>
</body>
</html>
Sep 26, 2014 Hoan Huynh

Source Code Demo page

PHP UTF-8 Change Text To UPPERCASE - Text To lowercase - Capitalize Each Word - UPPERCASE First CharacterMacbook Show Filename Extensions
You Might Also Like:
  • Create A New Template For WordPress Page
  • Create Count Down Download Page With JavaScript
  • Simple Truncate Words Function In C#
  • JQuery Dialog Hide Or Remove Close Button
  • JQuery Show Popup Once A Day
  • FancyBox Redirect To A Predefined URL When Click On Image
  • JQuery Read Rows And Columns Of HTML Table
  • JQuery Call Function To Parent And Children Div
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • JQuery How to use DatePicker
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com

Link5 years ago JavascriptJQuery, Toggle173
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
18,697 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
14,446 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
13,326 views
JQuery Allow only numeric characters or only alphabet characters in textbox
10,871 views
C# Read Json From URL And Parse/Deserialize Json
7,461 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Magento Fatal error: Unsupported operand types
  • Ionic bower the name contains uppercase letters
  • PHP Magento Get Manufacturer Name And ID From Magento Product ID
  • Know Simple Hacks To Systematize Media Library in WordPress
  • A handy guideline on adding custom menu item in WordPress admin
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (26)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (140)
EMAIL SUBSCRIPTION

Sign up for our newsletter to receive the latest news and event postings.

Recommended
  • CDN
  • Hosting
  • Premium Themes
  • VPS
2014 © 4 Rapid Development