Replace one div with another

Question

mattsearle 0 Newbie Poster

11 Years Ago

Hi I have discovered the script below which I would like to work with buttons as opposed to hovering and clicking on the text.

<div id = "div1" style="display:block" onclick = "replace()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div> 
<div id = "div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div> <script type = "text/javascript"> function replace() { document.getElementById("div1").style.display="none"; document.getElementById("div2").style.display="block"; } </script>

javascript

Edited 11 Years Ago by Dani because: Formatting fixed

3 Contributors
11 Replies
9K Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by mattsearle

JorgeM 958 Problem Solver

11 Years Ago

Simply add a button with the onclick event.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example</title>
</head>
<body>
<button onclick="replace();return false"/>Click to Replace</button>

<div id = "div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div>

<div id = "div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div> 

<script> 
function replace() { 
document.getElementById("div1").style.display="none"; 
document.getElementById("div2").style.display="block"; 
} 
</script>
</body>
</html>

suraj9900 commented: Thanks +0

JorgeM 958 Problem Solver

11 Years Ago

Yes, on the onclick event for each botton, you can pass a parameter with the method to identify which div you want to target. This way you can do this using one function.

JorgeM 958 Problem Solver

11 Years Ago

I dont exactly understand your objective. How do you want to use 4 buttons for 2 divs?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mattsearle 0 Newbie Poster · Answer 1 · 2012-11-07T18:04:51+00:00

Thanks for your prompt reply.

Require 4 buttons each one to change the text within the div ie button "info 1" to change the text within the div1, "info 2" to change the text within the div 2.

Is this possible

mattsearle 0 Newbie Poster · Answer 2 · 2012-11-07T18:29:25+00:00

As you may have realised I am a novice at all this and appreciate your help.

Are you able to show me through coding.

Many Thanks

Taywin 312 Posting Virtuoso · Answer 3 · 2012-11-07T20:08:58+00:00

In the function called by onclick, pass in the div ID. Then in the function, reassign the value you want to the div ID.

@JorgeM, the OP said "Require 4 buttons each one to change the text within the div --> ie <-- button "info 1" to change the text within the div1, "info 2" to change the text within the div 2." :) The ie means for example.

mattsearle 0 Newbie Poster · Answer 4 · 2012-11-07T23:02:30+00:00

Have found this code which works, but now need to format the text within the header code.

Are you able to help.

<!-- Header Code -->
<script type="text/javascript">function show(page)
  {     
     var html = "";    
         switch(page)     
            {                
               case "home": html = "Our range of landscaping products<br />";break;    
               case "about": html = "Screened Topsoil<br />";break;    
               case "contact": html = "Premium Topsoil<br />";break; 
               case "new": html = "Blended Topsoil<br />";break; 
                 }   
              document.getElementById('container').innerHTML = html;}
              </script>


<!-- Body Code -->

<div id="container">This is the homepage<br />...</div>
<a href="#" title="Home" onclick="show('home');return false">Home</a>
<a href="#" title="About" onclick="show('about');return false">About</a>
<a href="#" title="Contact" onclick="show('contact');return false">Contact</a>
<a href="#" title="New" onclick="show('new');return false">Contact</a>

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 5 · 2012-11-08T01:18:22+00:00

Header code? Do you mean page structure? you can place your script within the head element or at the end, just before hte closing body tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example</title>
<script type="text/javascript">
function show(page)
  {     
     var html = "";    
         switch(page)     
            {                
               case "home": html = "Our range of landscaping products<br />";break;    
               case "about": html = "Screened Topsoil<br />";break;    
               case "contact": html = "Premium Topsoil<br />";break; 
               case "new": html = "Blended Topsoil<br />";break; 
                 }   
              document.getElementById('container').innerHTML = html;}
</script>
</head>
<body>
<div id="container">This is the homepage<br />...</div>
<a href="#" title="Home" onclick="show('home');return false">Home</a>
<a href="#" title="About" onclick="show('about');return false">About</a>
<a href="#" title="Contact" onclick="show('contact');return false">Contact</a>
<a href="#" title="New" onclick="show('new');return false">Contact</a>
</body>
</html>

mattsearle 0 Newbie Poster · Answer 6 · 2012-11-08T11:37:06+00:00

Hi i to format the "text" after each of the html =, ie html = "Our range of landscaping products<br />";break;
so that the font size, colour, style can be changed.

At present the text within the quotations shows as a standard font and when adding additional code to try and change the font the script no longer works.

Is there a solution or am I looking at what I am trying to achieve incorrectly.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 7 · 2012-11-08T13:13:44+00:00

There are basically three methods that you can use to style the contents of your HTML elements, Summary: Inline, Internal, and External Styles.

External style sheets are commonly used when you want to apply a set of styles accross multiple pags in your web application.

Internal styles are used when you only need to apply a specific set of styles to one page.

Inline styles should be avoided and are used when you need to style a specific element when the external, internal styles are not appropriate.

So lets say this was a single standing page. You could style all of your hyperlinks using internal styles.

In the <head> section, add an opening and closing <style> tags. For example, to style your text within the container div, and your anchor elements, you can do something like this...

<style>
a {font-size:1.5em;}
#container {font-color:#ff0000;}
</style>

You probably need to read up on CSS. There are plenty of online guides and tutorials.

mattsearle 0 Newbie Poster · Answer 8 · 2012-11-09T13:37:21+00:00

Heading Here

Hi, I am looking for help.

I have tried to format the text as above without success as the script stops running.

The script below I have working as a dropdown box which changes the div's as previous post. Can the dropdown box be changed to represent individual buttons which in turn replace the text in the div's. I am looking for help

<head>
<style type="text/css">
.dropcontent{
width: 300px;
height: 140px;
border: 1px solid black;
background-color: #FFECC6;
display:block;
}
</style>

<script type="text/javascript">


if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)

</script>
</head>



<form name="dropmsgform">
<select name="dropmsgoption" size="1" style="width:300" onChange="expandone()">
    <option selected>What is JavaScript?</option>
    <option>Difference betwen Java and JavaScript</option>
    <option>What is DHTML?</option>
</select>
<br>

<div id="dropmsg0" class="dropcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<div id="dropmsg1" class="dropcontent">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
</div>

<div id="dropmsg2" class="dropcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

</form>