Member Avatar for nadiam

hey guys so i have these drop down menu using ul and anchor and when i click on one an image should be displayed. the problem is when i click it the image appears but then disappears right after, like a second.

html:

                    <ul>
                       <li><a href="" onclick="document.getElementById('banquetsix').style.visibility='visible';">6   
                        Seater</a></li>
                        <li><a href="">8 Seater</a></li>
                        <li><a href="">10 Seater</a></li>
                    </ul>    

                    <img id="banquetsix" class="banq" src="image/banquet6.jpg" />

                    .banq{visibility:hidden}
  • 2 Contributors
  • 1 Reply
  • 849 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by patk570
Member Avatar for patk570

Try this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Toggle images</title>
    <style>
      .hidden{display:none;}
    </style>
  </head>

  <body>
         <ul>
    <li><a href="" id="6seat">6 Seater</a></li>
    <li><a href="" id="8seat">8 Seater</a></li>
    <li><a href="" id="10seat">10 Seater</a></li>
    </ul>
    <div id="imgdiv"></div>
    <!--Load JS at end for fast load times -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
    $('#6seat').click(function() {
        $("img").remove()
$("#imgdiv").append("<img id='theImg' src='http://www.mytabletbooksqa.com/ProductImages/test1.gif'/>");

});
    $('#8seat').click(function() {
        $("img").remove()
$("#imgdiv").prepend("<img id='theImg' src='http://blogs.edweek.org/teachers/coach_gs_teaching_tips/Teaching%20To%20The%20Test.gif'/>");

});
    $('#10seat').click(function() {
        $("img").remove()
$("#imgdiv").append("<img id='theImg' src='http://csunplugged.org/sites/default/files/cartoons/turing%20test.jpg?1246936875'/>");

});
    </script>
  </body>
</html>
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.