JQuery - How to create "Show-Hide" Text block on webpage?

Hello Mr.Experts....

It will be much appreciated if you could advise how to create "Show-Hide Text Block" by JQuery code.
I am just trying to learn about how JQuery works. I have some Java Scripts expereince.
I am working on the source code from the website (mentioned below) and could not figure it out.
I copied HTML codes plus JQuery files and ran the code on my server.
And it did not work.

After all day of struggle and unsuccessful attempts, I am now exhausted with headache . I give up now. Phew ! .....
I am a slow learner, thanks for bearing with me. I need to write the code for future project .....Please help!
Thank you.

Please advise or spare any code to ceate a "Show/Hide (drop-down) action.
Here is the sample website. Please click  "Read More" button (Located at right-upper corner, under "Advertising Executive" sub label).  On this link:

http://www.cnbc.com/id/36715336?slide=3

kingrolandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
0
hieloCommented:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script language="JavaScript" type="text/javascript">
		$(function(){
			$('.readMore').bind('click',function(){
				var idNum=this.id.replace(/\D/g,'');
				if( $('#content' + idNum).is(':hidden') )
					$('#content' + idNum).slideDown()
				else
					$('#content' + idNum).slideUp()
				
			});
		});
		</script>

	</head>
	<body>
		
		<div id='content1'>First block</div>
		<div><a href="#" id='item1' class='readMore'>Read More</a></div>

		
		<div id='content2'>Second block</div>
		<div><a href="#" id='item2' class='readMore'>Read More</a></div>

	</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bukkoCommented:
Hi,

I do this quite a lot.
I tend to use custom attributes to achieve it, like the following:


// jQuery follows:

$(document).ready(function() {
    $('.expander').click(function() {
        var $content=$('#' + $(this).attr('content'));
        var state=$content.attr('state');
        if(state=='visible') {
            $content.slideUp();
            $content.attr('state')='hidden');
        }
        if(state=='hidden') {
            $content.slideDown();
            $content.attr('state')='visible');
        }
    });
});

// html follows:

<div id='firstdiv' content='seconddiv' class='expander otherclass1 otherclass2'>Show / Hide content</div>
<div id='seconddiv' state='visible'>
    content appears here
</div>

Open in new window

0
kingrolandAuthor Commented:
Thank you for all your advice on JQuery.
I accepted all 3 advices from 3 different experts, because your script and info link are  proved to be working and helping. You all are my hero. Credit point 500 is split into 3 portion for 3 experts. Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.