Posts by Sweetee

3 posts
  • Has been a member for 1-2 years
Sweetee says

Hi SportTipsWorld,

the link you sent me works perfectly on the link, but when I transferred the code to my html file, I didn’t have much luck with it. I can do the selection, but nothing appears below whichever choice I select. What do you think might be the problem?

THANKS ! on a very tight deadline here…

3 posts
  • Has been a member for 1-2 years
Sweetee says

Thanks for the prompt reply!

What about if I want to replace the selection function with 5 buttons at the top?

With select option.
3 posts
  • Has been a member for 1-2 years
Sweetee says

Hi KamilWaheed,

Thanks for the solution and I could imagine it can do the trick easily..! Unfortunately I cannot get it to work after following all the procedures you’ve provided…

When I click the buttons, nothing happen except the page refreshes…

This is the code:

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1 .0 Transitional//EN” “”> <html xmlns=””> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>Untitled Document</title> <script type=”text/javascript” src=””></script>

<style type=”text/css”> .mydivshow {display:block;} .mydivhide {display:none;} .mybutton myred {color:rgba(251,24,2,1);} .mybutton myblue {color:rgba(44,0,235,1);}.mybutton mygreen {color: rgba(38,253,54,1);} </style>


Div 1 Div 2 Div 3 ... ... ...

<script type=”text/javascript”> var buttons = $(”#buttons”).find(“a”); $(“buttons”).click(function() { var id = $(this).attribute(“id”); $(“pages id”).css(“display”, “none”); $(“pages id:eq(“id“)”).css(“display”, “block”); }); </script>

I am very junior in terms of web design… Hope to hear from you soon!


How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?
Thanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created. My question is how do I do this? (making it visible and invisible)

I would recommend you to use jQuery to achieve your target easily.

Here’s how to do this:

Add the following line inside head tag.

<script type="text/javascript" src=""></script>
Put the 3 buttons inside a div like this and assign them ids :
<div id="buttons">
     <a href="#" id="0" class="mybutton myred">Div 1</a>
     <a href="#" id="1" class="mybutton myblue">Div 2</a>
     <a href="#" id="2" class="mybutton myblue">Div 3</a>

Same thing for the pages, like this:

<div id="pages">
<div id="1" class="mydivshow">...</div>
<div id="2" class="mydivhide">...</div>
<div id="3" class="mydivhide">...</div>

Then, add the following lines inside the body tag.

<script type="text/javascript">
var buttons = $("#buttons").find("a");
$("buttons").click(function() {
       var id = $(this).attribute("id");
       $("pages id").css("display", "none");
       $("pages id:eq("+id+")").css("display", "block");