Hi there!
It’s done with this bit of javascript:
<script type="text/javascript">
$(document).ready(function(){ //hide the all of the element with class msg_body
$(".msg_body").hide(); //toggle the component with class msg_body
$(".msg_head").click(function()
{
$(this).next(".msg_body").slideToggle();
});});
</script>
then, the questions have this format:
<p class="msg_head"><strong class="redonly">Do I have to be a professional to participate?</strong></p>
<div class="msg_body">No, you don’t. With even high school education you can take part in our teaching, sports and social services programs, and HIV/AIDS campaign. However, some health positions require some skills and related experience. </div>
msg_head is showed, but msg_body is hidden until you click.
Thank you so much for the timely reply. This is my first time messing around with Java, so I am having some trouble using it. I have entered the java script code here in my header.php (a wordpress tutorial told me to)
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('»', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<script type="text/javascript">
$(document).ready(function(){ //hide the all of the element with class msg_body
$(".msg_body").hide(); //toggle the component with class msg_body
$(".msg_head").click(function()
{
$(this).next(".msg_body").slideToggle();
});});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>"/>
<link rel="stylesheet" type="text/css" media="print" href="<?php echo CONSTRUCTOR_DIRECTORY_URI; ?>/print.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="<?php echo CONSTRUCTOR_DIRECTORY_URI; ?>/style-480.css" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
and then I’ve entered the list in a FAQ page like this:
<script type="text/javascript">
<p class="msg_head"><strong class="redonly">Do I have to be a professional to participate?</strong></p>
<div class="msg_body">No, you don’t. With even high school education you can take part in our teaching, sports and social services programs, and HIV/AIDS campaign. However, some health positions require some skills and related experience. </div>
</script>
The FAQ page comes up blank like there is no text, but everything else loads normal.
Any ideas? Thanks so much for your help, it’s much appreciated.
Hey there! I forgot to tell you: you have to had the Jquery library.
You can download a copy here, or you can just link the one at google api:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I tried it using the Jquey file on google and it works fine.
