CODEWITHSUNDEEP
jqueryhtmlcss
user2162270
user2162270

Reputation:

move content from div to another automatically

Lets say I have two div's, one called div A and the other one called div B.

Now, div B must have the exact content of div A, so I have to manually copy and paste the content from A to B every time I change the content in A...

Is there a way maybe using CSS to give div B whatever is in div A?

Example: 

<!--Contact Details Section-->
                    <div id="contactDetails">

                        <div id="contactDetails-normal">
                            <h3>Contact Details</h3>
                            <p><strong>Email:</strong> [email protected]</p>
                            <p><strong>Telephone:</strong> 020 8202 9767</p>
                        </div>

                        <!--Phone contact buttons-->
                        <div class="hidden" id="contactDetails-smart">
                            <a href="tel:020 8202 9767">Call us: 020 8202 9767</a>
                                <br>
                            <p><strong>Email:</strong> [email protected]</p>
                        </div>
                        <br>

So as you can see above, I have two divs, one is contactDetails-normal and contactDetails-smart... each will show on a different size screen. But both will always have the same info...

Upvotes: 1

Views: 254

Answers (5)

Wez
Wez

Reputation: 10712

Based on the edits to the question I would recommend using css media query to style one element differently based on screen size instead of having repetitive HTML and extra javascript.

html

<div id="contactDetails">
  <h3>Contact Details</h3>
  <p><strong>Email:</strong> [email protected]</p>
  <p class="tel"><strong>Telephone:</strong> 0000000</p>
  <p class="sms"><strong>SMS:</strong> 0000000</p>
</div>

css

#contactDetails {
    //Styling for large screen size
}

@media screen and (max-width: 400px) {

  #contactDetails {
      //Styling for screen size smaller than 400px
  }

}

If you want elements inside the contactDetails to be visible only on smaller screen sizes you can also address them in the media query like so (note: i have added the relevant classes to the above html.)

css

#contactDetails .tel, #contactDetails .sms {
    display:none;
}

@media screen and (max-width: 400px) {

  #contactDetails .tel, #contactDetails .sms {
      display:inline;
  }

}

If you use this, be careful as older browsers don't always support media queries you may need to use something like respond.js to help them along https://github.com/scottjehl/Respond

Upvotes: 2

Theox
Theox

Reputation: 1363

You cannot do this with CSS.

But you can use jquery to do this easily :

$(function() {        
    $("#B").html($("#A").html());    
 });

This will simply copy all the html code inside the A div to the B div.

Demonstration : http://jsfiddle.net/e9GBn/1/

Upvotes: 0

Mr.G
Mr.G

Reputation: 3559

Try this javascript:

document.getElementById("div2").appendChild(
    document.getElementById('"div1"')
  );

Upvotes: 0

Kaspars Ozols
Kaspars Ozols

Reputation: 7017

You can not do that in CSS because CSS does not affect DOM tree.

Instead, you could use some jQuery script to clone your div.

Here is a demo from jQuery docs:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<b>Hello</b><p>, how are you?</p>

<script>
$( "b" ).clone().prependTo( "p" );
</script>

</body>
</html>

http://api.jquery.com/clone/

Upvotes: 0

SW4
SW4

Reputation: 71160

This is not possible using CSS, you'll need to resort to Javascript if you want this to happen, e.g. in jQuery you could use:

$( "#div2" ).html($( "#div1" ).html(););

Alternatively, if you only wish to copy textual content use text()

Upvotes: 3

Related Questions