Drop down news

[davy_yg]

Hi I would like to create drop scroll show content, how to do so ?

v Fiat Justitia Ruat Caelum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta.

> Fiat Justitia Ruat Caelum

> Fiat Justitia Ruat Caelum

> Fiat Justitia Ruat Caelum

Like the first one. Whenever the user click the title, it will show it's content. How to do so?

[pritaeas]

You mean like this: http://www.pritaeas.net/view/articles/faq-with-jquery

[davy_yg]

Thanks. Mmm.. can you check why this does not work ?

page-practice-area.php

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jq-faq-1.js"></script>

<div id="body">
<div id="content">
	<div id="main">
<h4>PRACTICE AREA</h4>
<p style="border-bottom: 2px dotted #FF0000; width: 620px;"></p><br />
		<div class="post">

<div class="faq">
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p><br />

<div class="answer-wrapper">
<p class="answer">        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p>
</div>

<br />
<br />

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p><br />

<p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p>
<br />

style.css

.question {
	<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript">
	margin: 0;  
	padding: 10px;
}

.answer-wrapper { 
	margin: 0;  
	padding: 10px;
}

.answer {  
    display: none; 
    margin: 0;  
    padding: 10px;
}

The result appears:

> FIAT JUSTITIA RUAT CAELUM

(Invisible in my webpage - but when I copy paste it here the text appears, why? )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque.

> FIAT JUSTITIA RUAT CAELUM

Basically I can see only the title in my webpage. And the title link does not change (hide/show) the answer.

[pritaeas]

Put your entire page online somewhere, so I can see your complete example.

My demo page works, so need to see what you changed.

[davy_yg]

Hmmm... I cannot do that unfortunately. That's the code that I have posted.

I do not get the web hosting server information yet.

Well, can you help me out from the codes ? or make a guess what might be the problem ?

[pritaeas]

What you posted appears incomplete. Compare your page again with my "final demo". I think you use the wrong js file.

[davy_yg]

http://www.masterlink.co.id/page-practice-area.php

[pritaeas]

Code shows PHP error. HTML is incomplete, no head, no doctype.... Compare against my example first.

[davy_yg]

I fix it. It's still does not show the text.

PRACTICE AREA

> FIAT JUSTITIA RUAT CAELUM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque.

(answer is invisible in the webpage)

What's in jq-faq-2.js ? I am following your tutorial: using jq-faq-1.js

[pritaeas]

Come on. Compare with my code, it's completely different. You have no doctype, no body, script is the wrong place, and a script in your css. If you use the files that are in the downloadable zip file (at the bottom of the tutorial), you'll have a working one.

Last, remove my google analytics code.

[davy_yg]

x

[pritaeas]

See the attached file, it is a working demo (final demo in the tutorial).

[davy_yg]

How about this:

http://www.masterlink.co.id/scroll%20down.php

[pritaeas]

The <br /> are in the way, remove them. You can add space with CSS.

[davy_yg]

The upperlink already works. but it does not work in here yet. It's wordpress themes. I cannot upload the file since I do not have the hosting information yet (it requires larger space). Can you check why it does not work:

header.php

<!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>Octlaw.com</title>

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen"  />


</head>



<div id="container">
	<div id="header">
 
    
    
    <div id="body">
	<div id="topcorner">      
		<a href="#">Career</a> | <a href="#">Mail</a>	  
    </div>
    </div>
 
  
	<ul id="nav">
     <div id="body">
        
      <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" /><?php wp_list_pages('sort_column=menu_order&title_li=&link_after=<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" />');?></li>	        
      
      <?php /*
       $args = array(
	  'title_li'     => '',
	  'sort_column'  => 'menu_order',
	  'link_after'   => '<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" />'
        );
		
	   wp_list_pages($args);  */
		?>
    
    

        <div id="search"><?php include('search.php'); ?></div>
     </div>
    </div>

 </div>
</div>

page-practice-area.php

<?php get_header(); ?>


<body>
<div id="body">
<div id="content">
	<div id="main">
<h4>PRACTICE AREA</h4>
<p style="border-bottom: 2px dotted #FF0000; width: 620px;"></p><br />
		<div class="post">

<div class="faq">
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
</div>

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>
       
<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
       
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>
						
<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>      


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jq-faq-2.js"></script>                 
      	
</div>            
 
     </div>
   </div>
   
</body>   

<?php //get_sidebar(); ?>

  </div>
</div>


<?php //get_footer(); ?>

The outcome is correct (I can see the question and answer) yet I cannot hide nor show the answer.

[pritaeas]

I don't see a problem with the above, looks the same as the previous link. Notify me here when you get it online.

[davy_yg]

Yours work both in localhost and online. I wonder why mine only works online. I tested the same code both in localhost and online and only works online.

In localhost, it appears correctly, yet I cannot hide and show the answer.

Online it appears like this:
http://www.masterlink.co.id/scroll%20down.php

Why is it ? What might be the problem ?

It's gonna take somtimes until I get the hosting information while I have to get this done in couple days.

[pritaeas]

<body> should follow directly after </head> but I am not sure if this could be the cause. And I would place the script directly before </body> instead of within your div's. Make sure you use well-formed XHTML.

[davy_yg]

Nevermind, it also works in localhost. I forget to copy jquery-1.4.2.min.js to the js folder. Now, it works both local and online. Yet, it does not in wordpress. Strange, the code is exactly the same, except that in wordpress is divided into two files.

Earlier I try to move the </head> to the bottom of header.php, also does not work.

[davy_yg]

View Source:

<!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>Octlaw.com</title>

<link href="http://localhost/wordpress/wp-content/themes/ocklaw/style.css" rel="stylesheet" type="text/css" media="screen"  />







<div id="container">
	<div id="header"> 
    
    
    <div id="body">
	<div id="topcorner">      
		<a href="#">Career</a> | <a href="#">Mail</a>	  
    </div>
    </div>
 
  
	<ul id="navH">
     <div id="body">
        
      <li><img src="http://localhost/wordpress/wp-content/themes/ocklaw/images/navline.png" /><li class="page_item page-item-2"><a href="http://localhost/wordpress/home/">HOME<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" /></a></li>
<li class="page_item page-item-23"><a href="http://localhost/wordpress/about/">ABOUT<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" /></a></li>
<li class="page_item page-item-25 current_page_item"><a href="http://localhost/wordpress/practice-area/">PRACTICE AREA<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" /></a></li>
<li class="page_item page-item-27"><a href="http://localhost/wordpress/news/">NEWS<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" /></a></li>
<li class="page_item page-item-29"><a href="http://localhost/wordpress/published-books/">PUBLISHED BOOKS<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" /></a></li>
<li class="page_item page-item-31"><a href="http://localhost/wordpress/contact/">CONTACT<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" alt="" /></a></li>
</li>	        
      
          
    

        <div id="search">

<font color = "#A9A9A9">
<form action="http://localhost/wordpress/">
<input type="text" class="searchbox" name="s" value="type keywords" onFocus="if (this.value=='type keywords')this.value='';" onBlur="if (this.value=='')this.value='type keywords'" />
<input type="image" src="http://localhost/wordpress/wp-content/themes/ocklaw/images/searchbutton.png" class="searchbox_submit" value="" />
</form>
</font></div>
     </div>
    </ul>

 </div>
</div>


</head>	

<body>
<div id="body">
<div id="content">
	<div id="main">
<h4>PRACTICE AREA</h4>
<p style="border-bottom: 2px dotted #FF0000; width: 620px;"></p><br />
		<div class="post">

<div class="faq">
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
</div>

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>
       
<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
       
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>
						
<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>      


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jq-faq-2.js"></script>            
      	
         
 
     </div>
   </div>

</body>     


  </div>
</div>



</html>

[pritaeas]

<body> is still in the wrong place. script is preferred to be before </body> which should be before </html>

Write valid XHTML !