Drop down news

Question

davy_yg 2 Posting Whiz

12 Years Ago

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

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

jquery php slide toggle

2 Contributors
20 Replies
475 Views
4 Days Discussion Span
Latest Post 12 Years Ago Latest Post by pritaeas

All 20 Replies

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

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

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

Edited 12 Years Ago by pritaeas because: n/a

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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.

Edited 12 Years Ago by pritaeas because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2012-02-04T00:05:26+00:00

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.

davy_yg 2 Posting Whiz · Answer 2 · 2012-02-05T09:53:32+00:00

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 ?

davy_yg 2 Posting Whiz · Answer 3 · 2012-02-05T20:46:05+00:00

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

davy_yg 2 Posting Whiz · Answer 4 · 2012-02-05T22:25:42+00:00

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

davy_yg 2 Posting Whiz · Answer 5 · 2012-02-07T13:06:10+00:00

davy_yg 2 Posting Whiz

12 Years Ago

x

Edited 12 Years Ago by davy_yg because: n/a

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 6 · 2012-02-07T14:47:14+00:00

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

jq-faq-2.zip (26.3 KB)

Edited 12 Years Ago by pritaeas because: n/a

davy_yg 2 Posting Whiz · Answer 7 · 2012-02-07T16:55:01+00:00

How about this:

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

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 8 · 2012-02-07T17:11:04+00:00

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

Edited 12 Years Ago by pritaeas because: n/a

davy_yg 2 Posting Whiz · Answer 9 · 2012-02-07T17:44:55+00:00

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 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 10 · 2012-02-07T17:53:06+00:00

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 2 Posting Whiz · Answer 11 · 2012-02-07T20:12:59+00:00

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 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 12 · 2012-02-07T20:30:45+00:00

<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 2 Posting Whiz · Answer 13 · 2012-02-07T20:38:17+00:00

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 2 Posting Whiz · Answer 14 · 2012-02-07T21:11:15+00:00

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 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 15 · 2012-02-07T21:13:57+00:00

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

Write valid XHTML !

Drop down news

Recommended Answers Collapse Answers

All 20 Replies

Recommended Answers