CODEWITHSUNDEEP
javascriptjqueryslidetoggleimagemap
Mikkel Gadegaard
Mikkel Gadegaard

Reputation: 386

Different content shown based on image map link(s)

I have an image mapped to 3 links at the bottom of a page. Clicking a link slides related content into view from the bottom. Clicking the link again will make the content disappear.

Lets say I have clicked link 1 so that content 1 is visible. If I then click link 2 content two is also shown. What I would like is that as I click link 2, content 1 disappears and content 2 is shown. etc.

Is it possible to modify what I have below to achieve this?

Posted code below, and have example here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Example</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        jQuery( document ).ready( function() {
          jQuery( '#about-text-link' ).click(function() {
            jQuery( '#about-text' ).slideToggle( 'slow' );
            jQuery( this ).toggleClass( 'active' );
            return false;
          });
          jQuery( '#editions-text-link' ).click(function() {
            jQuery( '#editions-text' ).slideToggle( 'slow' );
            jQuery( this ).toggleClass( 'active' );
            return false;
          });
          jQuery( '#contact-text-link' ).click(function() {
            jQuery( '#contact-text' ).slideToggle( 'slow' );
            jQuery( this ).toggleClass( 'active' );
            return false;
          });
        });
    </script>
    <style type="text/css">
      .menu {
        background-color: #FFFFFF;
        display: none;
        overflow: hidden;
        border: 1px solid #CCCCCC;
      }

      #bottom-block {
        position: absolute;
        width: 435px;
        left: 50%;
        margin-left: -218px;
      }

      #bottom-block {
        bottom: 0;
        }
    </style>
</head>
<body>
    <div id="page">
        <div id="bottom-block">
            <img src="menu.png" width="435px;" height="34px;" usemap="#map" />
            <map id="_map" name="map">
                <area shape="rect" coords="11,6,102,29" href="#" alt="about" title="about" id="about-text-link"   />
                <area shape="rect" coords="109,6,286,29" href="#" alt="editions" title="editions" id="editions-text-link"   />
                <area shape="rect" coords="295,6,410,29" href="#" alt="contact" title="contact" id="contact-text-link"   />
            </map>
            <div class="menu" id="about-text">
                About text
            </div>
            <div class="menu" id="editions-text">
                Editions text
            </div>
            <div class="menu" id="contact-text">
                Contact text
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 520

Answers (1)

notknown7777
notknown7777

Reputation: 419

You can do this with a document.getElementById(id).style.display = "none"; to hide the other elements, added the code in your code. hopefully this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>Example</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            jQuery( document ).ready( function() {
              jQuery( '#about-text-link' ).click(function() {
                jQuery( '#about-text' ).slideToggle( 'slow' );
                document.getElementById("editions-text").style.display = "none"; //-->
                document.getElementById("contact-text").style.display = "none"; //-->
                jQuery( this ).toggleClass( 'active' );
                return false;
              });
              jQuery( '#editions-text-link' ).click(function() {
                jQuery( '#editions-text' ).slideToggle( 'slow' );
                document.getElementById("about-text").style.display = "none";   // -->
                document.getElementById("contact-text").style.display = "none"; // -->
                jQuery( this ).toggleClass( 'active' );
                return false;
              });
              jQuery( '#contact-text-link' ).click(function() {
                jQuery( '#contact-text' ).slideToggle( 'slow' );
                document.getElementById("about-text").style.display = "none";    // -->
                document.getElementById("editions-text").style.display = "none"; // -->
                jQuery( this ).toggleClass( 'active' );
                return false;
              });
            });

          //--> added lines
        </script>
        <style type="text/css">
          .menu {
            background-color: #FFFFFF;
            display: none;
            overflow: hidden;
            border: 1px solid #CCCCCC;
          }

          #bottom-block {
            position: absolute;
            width: 435px;
            left: 50%;
            margin-left: -218px;
          }

          #bottom-block {
            bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <div id="bottom-block">
                <img src="menu.png" width="435px;" height="34px;" usemap="#map" />
                <map id="_map" name="map">
                    <area shape="rect" coords="11,6,102,29" href="#" alt="about" title="about" id="about-text-link"   />
                    <area shape="rect" coords="109,6,286,29" href="#" alt="editions" title="editions" id="editions-text-link"   />
                    <area shape="rect" coords="295,6,410,29" href="#" alt="contact" title="contact" id="contact-text-link"   />
                </map>
                <div class="menu" id="about-text">
                    About text
                </div>
                <div class="menu" id="editions-text">
                    Editions text
                </div>
                <div class="menu" id="contact-text">
                    Contact text
                </div>
            </div>
        </div>
    </body>
    </html>

Upvotes: 1

Related Questions