I want to make a like this example. Cliking at any question it shows the whole, and clicking for the second time it hides. I want this effect.
http://mentor.templates.pixelentity.com/faq.html
Is there any code snippets for that. I need the code. WHAT IS THE NAME OF THIS EFFECT?
Help!
Jahur
Jump to PostYou can leverage jQuery. Try the slideToggle method.
u can use this i try to do it for you i hope it works
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*this is the style for formation the other div */
.format {/*this class is for the div that contents the banner for clicking*/
width: 200px;
height: 20px;
background-color: black;
text-align: center;
color: white;
cursor: pointer;
}
.top_div {/*this class is for the div that contents all the question */
width:200px;
margin: 20px;
}
/*this style is only used when you want the default to be hidden
comment it out you want to default to be display*/
.con{
height: 0px;
overflow: hidden;
}
</style>
<script>
//this is the function that hid and show the questions
openCon = function () {
if (document.getElementById("con_div").style.overflow != "hidden") {
document.getElementById("con_div").style.overflow = "hidden";
document.getElementById("con_div").style.height = "0px";
}
else {
document.getElementById("con_div").style.overflow = "visible";
document.getElementById("con_div").style.height = "auto";
}
}
</script>
</head>
<body>
<div id ="to_div" class ="top_div"><!-- div containing all the question-->
<div id ="head" class ="format" onclick ="openCon(); " ><!--div containing the clicking part-->
<p>click to show hidden content</p>
</div><!-- End of div containing the clicking part-->
<div id ="con_div" class="con"><!--div containing content to be hidden-->
<p> all the text that you want it to show when the icon is clicked os let go
.duojhsldfje ptj lfkgndlfgndsfjsldkrjweo oejted
jdsfdsjgore helfk;jndsgjge
jdfsdogheorghnfh
</p>
</div><!-- End of div containing content to be hidden-->
</div>
<div><!-- End of div containing all the question-->
<p>Other content</p>
</div>
<!-- By Oteng Ghana -->
</body>
</html>
Is there any code snippets for that. I need the code. WHAT IS THE NAME OF THIS EFFECT?
It's called "accordion" and there are plenty of them: you can try this one among others
http://sandbox.scriptiny.com/accordion/index.html
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.