My q and a page sucks – it’s this: http://rankingclimber.com/qa.php
I checked out http://www.text-link-ads.com/r/faq and i really liked how the questions were clickable and the answers came down below.
I checked out the source code for text-link-ads.com and found the below code. But I feel like this requires some css file or some .js file in addition to this. can someone help me and give me instructions on how to do this? I have a basic knowledge of html and css.
<ul class="faq">
<li>
<a onclick="$('#advQ1').toggle();">What makes Text Link Ads unique?</a>
<div id="advQ1" style="display:none">
Text Link Ads are unique because they are static html links that can drive targeted traffic and help your link popularity which is a top factor in organic search engine rankings. </div>
</li>
<li>
<a onclick="$('#advQ2').toggle();">How are Text Link Ads priced?</a>
<div id="advQ2" style="display:none">
Text Link Ads are priced at a flat rate per month per link. You prepay for a 30 day run of your ad, and your account will be set on recurring billing either via PayPal or credit card. Your ad will never be turned off if it gets too many impressions or clicks. Our pricing algorithm factors in a website's: traffic, theme, ad position, and link popularity when setting the flat ad rate per month. </div>
</li>
<li>
<a onclick="$('#advQ3').toggle();">I just placed an order, when will my ad go live?</a>
<div id="advQ3" style="display:none">
Most links are placed within 48 hours of the order being received. New ads require our publisher to review and accept the ad. The 30 day billing period will not begin until your ad is actually live. </div>
</li>
<li>
<a onclick="$('#advQ4').toggle();">What is Alexa?</a>
<div id="advQ4" style="display:none">
A website's "Alexa" ranking is a general indicator of the amount of traffic a website receives. The lower the number the more traffic that site receives, ie Yahoo.com is #1, Ebay.com is #8. More information on Alexa <a href="http://www.alexa.com/" target="_blank">here</a>. </div>
</li>
<li>
<a onclick="$('#advQ5').toggle();">How do I review my active running ads?</a>
<div id="advQ5" style="display:none">
You can review your current running ads <a href="/r/advertiser/edit_ads/">here</a> </div>
</li>
</ul>
This is a pretty broad topic, there are many ways to do it but I would start by looking at the tweening functionality in jQuery – http://jquery.com/
This is the javascript library that was used in that site, you can tell by the use of the $(‘#inputID’) pattern.
There are great examples on the jQuery site as a starting point.
Each anchor above has an onclick attribute that tells jquery to toggle the visibility of it’s corresponding DIV –
$('#advQ1').toggle();– where$('#advQ1')is the element to target and.toggle()is the jQuery function to run on it. You can target any element in the DOM by it’s ID or class name$('.className');Edit:
If you are just beginning jQuery then in particular check out the show(), hide() and toggle() functions:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle/