Replace Div with another Div

Question

I have this thing I m trying to do. I have a main picture of a map and within that map there are regions. These regions have hot spots on them so you can click them and it will replace the whole map with only the region. (just a simple div swap).

I need it as a div because in this div i have the hot spots listed.

There are a total of 4 divs that I am going to need to do this with.

If anyone could help me that would be awesome!

So links that are listed in a table need to replace the image in a separate div.

<tr class="thumb"></tr>
<td>All Regions (shows main map) (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Northern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Southern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Eastern Region (link)</td>
</tr>
</table>


<div>All Regions image</div>
<div>northern image</div>
<div>southern image</div>
<div>Eastern image</div>

I am not allowed to post images because I don't have enough points so I know the image links wont work.

@jake - welcome to Stackoverflow. I have a suggestion for you. It's better if you can show some codes. Like where is the problem -or what have you gone through so far. That way the one who would like to answer can also give you a better answer. ;) cheers! — Reigel Gallarde, Feb 21 '11 at 06:33
Sweet as thanks man ill do an edit now. Thanks heaps for your help and support guys! Ill update it now! — Jake, Feb 21 '11 at 06:35
So pretty much all the regions should be displayed only 1 at a time, on page load load up the all regions image then when you click on the link it changes to the relevant picture for it. — Jake, Feb 21 '11 at 06:49
That table wont change at all as it will be a refference to view other maps when you click on that link. — Jake, Feb 21 '11 at 23:41
@experimentx, thanks for your help man i have created this link http://jsfiddle.net/KNbQZ/ — Jake, Feb 21 '11 at 23:49

score 63 · Accepted Answer · edited Apr 06 '17 at 12:53

63

You can use .replaceWith()

$(function() {

  $(".region").click(function(e) {
    e.preventDefault();
    var content = $(this).html();
    $('#map').replaceWith('<div class="region">' + content + '</div>');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map">
  <div class="region"><a href="link1">region1</a></div>
  <div class="region"><a href="link2">region2</a></div>
  <div class="region"><a href="link3">region3</a></div>
</div>

edited Apr 06 '17 at 12:53

KyleMit

30,350
66
462
664

answered Feb 21 '11 at 06:20

Gowri

16,587
26
100
160

Well i need a link to change a complete seperate Div rather than the text its self. So click the link and the link stays the same but the images change between them – Jake Feb 21 '11 at 06:23
yeah this is pretty much what im after, but rather than the links be hidden have the images. So there is a constant list of region names. When you click the region name it changes the image in the div. I put some code in my original questing as for the structure that i am looking for. Thank you so much for your help – Jake Feb 21 '11 at 23:43
Works like charm! Thanks. – Vinícius Nov 20 '18 at 19:32

score 18 · Answer 2 · edited Apr 06 '17 at 12:54

18

HTML

<div id="replaceMe">i need to be replaced</div>
<div id="iamReplacement">i am replacement</div>

JavaScript

jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));

edited Apr 06 '17 at 12:54

KyleMit

30,350
66
462
664

answered Feb 21 '11 at 06:52

Praveen Prasad

31,561
18
73
106

score 1 · Answer 3 · answered Feb 23 '11 at 04:40

This should help you

HTML

<!-- pretty much i just need to click a link within the regions table and it changes to the neccesary div. -->

<table>
<tr class="thumb"></tr>
    <td><a href="#" class="showall">All Regions</a> (shows main map) (link)</td>   

<tr class="thumb"></tr>
<td>Northern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Southern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Eastern Region (link)</td>
</tr>
</table>
<br />

<div id="mainmapplace">
    <div id="mainmap">
        All Regions image
    </div>
</div>
<div id="region">
    <div class="replace">northern image</div>
    <div class="replace">southern image</div>
    <div class="replace">Eastern image</div>
</div>

JavaScript

var originalmap;
var flag = false;

$(function (){

    $(".replace").click(function(){
            flag = true;
            originalmap = $('#mainmap');
            $('#mainmap').replaceWith($(this));
        });

    $('.showall').click(
        function(){
            if(flag == true){
                $('#region').append($('#mainmapplace .replace'));                
                $('#mainmapplace').children().remove();
                $('#mainmapplace').append($(originalmap));
                //$('#mapplace').append();
            }
        }
    )

})

CSS

#mainmapplace{
    width: 100px;
    height: 100px;
    background: red;
}

#region div{
    width: 100px;
    height: 100px;
    background: blue;
    margin: 10px 0 0 0;
}

Replace Div with another Div

3 Answers3

Linked

Related