change out information, without multiple divs

[turpentyne]

My boss has several projects where i need to change out information. I did one with an included file of several divs that are hidden/shown, depending on what the user clicks on. It got tedious. But I don't have access to mysql to set anything up.

Now I'm doing another project, with a map and several hotspots that will bring up a div, with a pic/content/url. The div will be located on a different place on the page, depending on which map hotspot was clicked.

So, with all those variables, I want to know an easier way to do this, where I can just have a list of variables to edit into one div, and not a series of divs. It's just too much.

Problem is, like I mentioned before. I don't have access to the mysql on these projects. So I can't just set up a little database of info. Besides, it's only 20 to 50 different items.

Right now, I just have something like this:

The javascript:

$(function(){
    $("#hotspot_details1").hide();
    $("#hotspot1,#closer").on("click", function(){
        $("#hotspot_details2").hide();
        $("#hotspot_details1").toggle('fast', function() { /* Animation complete.*/ });
    });
});

$(function(){
    $("#hotspot_details2").hide();
    $("#hotspot2,#closer2").on("click", function(){
        $("#hotspot_details1").hide();
        $("#hotspot_details2").toggle('fast', function() { 
        $("#hotspot_details2").stop().animate({ opacity: 1 }, 1400, function() { /* animation complete */ });
    });
    });
});
// and this would run on for hotspots 1 - 30. Yikes!

[/CODE]

and the html would include these items that pop-up:
[CODE]

<img id="hotspot1" class="hotspots" src="images/transp.gif" style="">

<img id="hotspot2" class="hotspots" src="images/hotspot.gif" style="">

<!-- and so on, hotspot images 3 - 30 -->
<!-- when the img is clicked, its corresponding div below appears: -->

                        <!-- DIV FOR HOTSPOT 1 /////////////////////////////////////////////////////////////////////////////////// -->

                        <div id="hotspot_details1" class="hotspot_details" style=" ">
                            <div class="hotspot_bg" style="">
                                <div style="height:20px;overflow:visible;position:absolute; width:20px;cursor:pointer;top:-106px;left:5px;">
                                    <img id="closer" src="images/closer.png" style="height:20px;">
                                </div>

                                <div id="pc1" class="popup_copy" style="height:0px;overflow:visible;background-color:white;">
                                    <img style="margin-top:-112px;" src="images/spot1_image.jpg">
                                    <p class="popup_pgraph">
                                        The ASDF is situated etcetera lorem ipsum dolor set amet et plurit anudim. lorem ipsum dolor set amet et plurit anudim
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- DIV FOR HOTSPOT 2 //////////////////////////////////////////////////////////////////////////////////////////// -->

                        <div id="hotspot_details2" class="hotspot_details" style="">
                            <div class="hotspot_bg" style="">
                                <div style="height:20px;overflow:visible;position:absolute; width:20px;cursor:pointer;top:-106px;left:5px;">
                                    <img id="closer2" src="images/closer.png" style="height:20px;">
                                </div>

                                <div  id="pc2" class="popup_copy" style="height:0px;overflow:visible;background-color:white;">
                                    <img style="margin-top:-112px;" src="images/map_hotspots/spot2_image.jpg">
                                    <p class="popup_pgraph">
                                        adfasdf is situated etcetera lorem ipsum dolor set amet et plurit anudim. lorem ipsum dolor set amet et plurit anudim
                                    </p>
                                </div>
                            </div>
                        </div>


                        <!-- ///////////////////// and again.. this would continue for another 27 divs ... ack! //////////////////////////// -->

</div> 

                <div id="close_the_map">
                    <a href="javascript:void();" id="mapcloser" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('mapBox').style.display='none';">                             
                        <img src="images/close_5.png" border="0"> <!-- 'CLOSE THE MAP' ICON -->
                    </a>
                </div>

                <div style="height:0px;overflow:visible;">
                    <img id="the_map" src="images/examples/map.jpg" > <!-- HERE'S THE MAP BACKGROUND -->
                </div>

[pritaeas]

$(function(){
    $("#hotspot_details1").hide();
    $("#hotspot1,#closer").on("click", function(){
        $("#hotspot_details2").hide();
        $("#hotspot_details1").toggle('fast', function() { /* Animation complete.*/ });
    });
});

Since this part is the same on all I guess, you could make it generic. Although it would be easier to use the class for that:

<img id="1" class="hotspots" src="images/transp.gif" style="">
<img id="2" class="hotspots" src="images/hotspot.gif" style="">

$(function(){
    $(".hotspot_details").hide();
    $(".hotspots,.closers").on("click", function(){
        $("#hotspot_details2").hide(); // <-- this needs some rethinking
        $("#hotspot_details" + $(this).attr('id')).toggle('fast', function() { /* Animation complete.*/ });
    });
});

Since you toggle 1 and 2, do you have some kind of grouping going on?