Link to home
Start Free TrialLog in
Avatar of Eric Bourland
Eric BourlandFlag for United States of America

asked on

help with CSS/Javascript DIV display

Hi friends. I need some help with a script on this page:

http://toughlikeyou.com/pages/Athletes.cfm

What is supposed to happen: when you click on an athlete's name on the left, the athlete's statement and biography is supposed to appear on the right.

Currently, only the first athlete's biography displays on the right.

This was working previously, then someone broke into this web site using an XSS vulberability, and I have needed to essentially rebuild this web site.

Any ideas what I can do to make this work? Thank you for your advice.

Here is what I have so far:

Javascript:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'> 

function show_article(index) {
    var articles = document.querySelectorAll('div.article');
    var i=0;
    for (i=0; i<articles.length; i++) {
        if (i == (index-1)) {
            articles[i].style.display = 'block';
        }
        else {
            articles[i].style.display = 'none';
        }
    }
}
</script>

Open in new window


CSS:
 #menu, #content {
    float: left;
}

#content {
    width: 360px;
	margin-top:30px;
}
.article {
    display: none;
}
.show {
    display: block;
}

Open in new window


menu HTML:
<div id="menu">
<h2>click name for excerpt:</h2>
<p><a href="#">Silas Baxter-Neal, Pro Skateboarder</a></p>
<p><a href="#">Brian Kachinsky, Pro BMX</a></p>
<p><a href="#">Patrick Melcher, Legendary Skateboarder</a></p>
<p><a href="#">Kevin Porter, Pro BMX</a></p>
<p><a href="#">Jerimiah Smith, Skateboarder</a></p>
<p><a href="#">Timmy Johnson, AM Skater</a></p>
<p><a href="#">Ray Lang, Snowboarder</a></p>
<p><a href="#">Matt Frankland, Skateboarder</a></p>
<p><a href="#">Mary Mills, Surfer</a></p>
<p><a href="#">Stoyan Angelov, Climber/Instructor/Triathlete</a></p>
<p><a href="#">Ariel Ries, Downhill Longboarder</a></p>
</div> 

Open in new window


Content HTML
<!-- begin content -->
<div id="content">
<div id="article1" class="article show"><!-- Silas Baxter-Neal -->
<p><strong>Silas Baxter-Neal</strong><br /> Excerpt on Physical Theraphy &mdash; One thing that I found unique about these two doctors was that they were very interested in the movements I did when I skated. They had me skate around the parking lot so they could see how my body moved and what muscle groups they needed to work on. After about a year of physical therapy and finally taking two months off the board, my ankles made a serious recovery and they function close to how they used to.</p>
<iframe src="http://www.youtube.com/embed/IMdQ-aeo_hA?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article2" class="article"><!-- Brian Kachinsky -->
<p><strong>Brian Kachinsky</strong><br /> Excerpt on Injuries and Healing &mdash; I feel like I've had it all at some point. Broken bones, fake teeth, surgeries, degenerative discs, rotator cuff issues, tons of stitches and have been to emergency rooms in more than eight countries including Germany, Mexico, Netherlands, Thailand, China, Estonia, and Brazil. I've worked with countless physical therapists both standard and holistic. I have also gained a good knowledge of the human body and how it works and heals in the process.</p>
<iframe src="http://www.youtube.com/embed/ARTavjAT5Pc?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article3" class="article"><!-- Patrick Melcher -->
<p><strong>Patrick Melcher</strong><br /> Excerpt from Recalling a Time in his Career &mdash; A second turning point came when I made the move from the Midwest out to California. Meeting my skate heroes and hooking up with all the industry heads was exactly what I needed at the time. I got sponsored, filmed a video part, and was ready to turn pro when I inevitably shattered my right knee. It was a disastrous setback, tearing all the ligaments in my knee, and it took a lot of therapy and time to get it back into working order.</p>
<iframe src="http://www.youtube.com/embed/IKdD2LCGBKs?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article4" class="article"><!-- Kevin Porter -->
<p><strong>Kevin Porter</strong><br /> Excerpt on Change &mdash; I learned that I lost half of my immune system that day. It was such a detrimental problem in my life. I got into this process where I was on top of the BMX world at the place where magazines labeled me "leader of the new school." I knew that I had some sort of established position in the industry. I'm not saying that I was the best in the world but I definitely built it up in my head that I had made it to this certain point. All these injuries, one after another, made me think, "You know what? You're killing yourself out here. You're in this position. You have support. Let's just kick back and do some other things while doing this."</p>
<iframe src="http://player.vimeo.com/video/35493874?title=0&amp;byline=0&amp;portrait=0" width="360" height="203" frameborder="0"></iframe></div>
<div id="article5" class="article"><!-- Jerimiah Smith -->
<p><strong>Jerimiah Smith</strong><br /> Excerpt on an Awakening &mdash; Physical therapy was a good "training" process for me, teaching myself to take care of my body and actually getting myself back to "normal." Since this injury was a little more serious than ones in the past, it put a new light in my eyes and taught me that if you take good care of your body it will treat you right in the end. Imagine that, right?</p>
<iframe src="http://www.youtube.com/embed/YWRj69k94Sg?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article6" class="article"><!-- Timmy Johnson -->
<p><strong>Timmy Johnson</strong><br /> Excerpt on Prevention &mdash; I think stretching is important because it loosens up the muscles and gives you more rebound. Let's say you didn't stretch and your breaking point is 45 degrees. You are more likely to break something than an individual who did stretch and has a breaking point of 90 degrees. Some people can even stretch beyond that to about 200 degrees. Being a skateboarder and having a high rebound is important because we're constantly hitting the ground, bending, pushing etc.</p>
<iframe src="http://www.youtube.com/embed/8cQINo5550c?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article7" class="article"><!-- Ray Lang -->
<p><strong>Ray Lang</strong><br /> Excerpt on Conditioning &mdash; I supplement my diet with a good amount of fish oil, calcium, and a multivitamin. The fish oil seems to help my joints a great deal. Before my injury, I never bothered to stretch at all. Now I am forced to stretch religiously or I tighten up quickly. I have a 30-minute yoga DVD that I practice in the laughter-free environment of my home, and it seems to keep me out there.</p>
</div>
<div id="article8" class="article"><!-- Matt Frankland -->
<p><strong>Matt Frankland</strong><br /> Excerpt on Lifestyle &mdash; I've spent over half of my life obsessing over that useless wooden plank and the feeling of stepping on it and pushing forward gets me every time. I have to warn girls when I start dating them to not interfere with my skateboar ding because, "I've known my skateboard far longer than you, and my skateboard never does me wrong."</p>
</div>
<div id="article9" class="article"><!-- Mary Mills -->
<p><strong>Mary Mills</strong><br /> Excerpt on Goals &mdash; Really, I just set a goal for when I wanted to be back on the surfboard. It wasn't a hard and fast one, but it was something I could shoot for. I think I got back on the board a week after my target day. It wasn't easy; it was just a matter of knowing I could do it.</p>
</div>
<div id="article10" class="article"><!-- Stoyan Angelov -->
<p><strong>Stoyan Angelov</strong><br /> Excerpt on the Beginning &mdash; Growing up, while most kids watched Looney Toons, a few friends and I were out in the woods with a rope, pocket knife, and a set of matches (frequently without adult supervision). I learned to tie a figure eight knot before I learned what numbers added up to eight. Luckily my parents always supported and encouraged my exploratory behavior, even when it was risky.</p>
</div>
<div id="article11" class="article"><!-- Ariel Ries -->
<p><strong>Ariel Ries</strong><br /> Excerpt on Moving Forward &mdash; At this point, it's over a year later I don't let it stop me from living the life I love. I can still feel like a dull pressure in my shoulder, but it's not painful. Since it's a newer injury, I really don't know what to expect. I have been focusing on conditioning and strength training my arms and upper body since my injury. I feel like if the muscles and tissue around the broken bone are strong, then the chances of it getting re-injured are less likely.</p>
</div>
</div>
<!-- /content-->

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Eric Bourland

ASKER

Worked like a charm. Robert, thanks very much. This saved me a lot of time and heartache.

Hope your day is going well.

best from Eric