21 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Australia
  • Has collected 50+ items on Envato Market
cgruber says

I am looking for a way to get the content in a div to change when a particular button is pressed.

I’ve put together a simple HTML page with the elements, can someone help me get this to work please?

http://smbnetworks.com.au/testdiv.html

Thanks heaps

767 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
outandouter says

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?

675 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+6 more
dexterous says

You can use HTML function of jquery to replace entire HTML content of a div – http://api.jquery.com/html/

There are few more ways in jQuery to do that.

380 posts
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
+2 more
kaaz says

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?

+1

21 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Australia
  • Has collected 50+ items on Envato Market
cgruber says

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)

767 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
outandouter says


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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></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>
</div>

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>
</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");
});
</script>
380 posts
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
+2 more
kaaz says
3 posts
  • Has been part of the Envato Community for over 1 year
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” “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>Untitled Document</title> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></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>

</head>

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!

Sweetee




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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></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>
</div>

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>
</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");
});
</script>
5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says
3 posts
  • Has been part of the Envato Community for over 1 year
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. http://jsfiddle.net/spliter/5xVDq/
by
by
by
by
by
by