Show hide multiple DIV elements on mouseover using jQuery

Sumeet

SOLVED CLOSED ACTIVE ANSWERED
User: Sumeet
Posted: on Nov 14, 2013 12:27 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 13799

Sir,
 I have placed two <a></a> tags with class name as mark1 & mark2. And placed two divs
having class name icontent1 & icontent2. 

There's a jquery function to display div when mouse hovered on anchor tag.

Also i have used for loop and couts the loop upto value of var i.

so if there's a no.of links the effect would be placed at once........but it's not working, plzz suggest where i am wrong.. 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
      var del = 1000;
	  var i = 2;
	  var j;
	  for (j=1;j<=i;j++)
	  {
        $('.icontent'+j).hide().prev('a.mark'+j).hover(function(){
          $(this).next('.icontent'+j).stop('fx', true).slideToggle(del);
        });
	  }
    });
 </script>
<title>JS Bin</title>
</head>
<body>
  <table border="1">
   <tr>
    <td align="left" valign="top">
	 <a href="#" class="mark1">hover anchor 1</a>
	</td>
	<td align="left" valign="top">
	 <a href="#" class="mark2">hover anchor 2</a>
	 
	</td>
   </tr>
   <tr>
    <td align="left" valign="top" height="50">s
	  <div class="icontent1">
        lorem ipsum dolor sit amet......
     </div>
	</td>
	<td align="left" valign="top" height="50">s
	 <div class="icontent2">
        lorem ipsum dolor sit amet......
     </div>
	</td>
   </tr>
  </table>
    
      
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 5

Reply
ANSWER
User: Mudassar
Replied: on Nov 16, 2013 08:25 AM
Report

I have made it dynamic and gave unique ids to mark but same class, and using the ids I have determined its content. Now you can have any number of mark and content combinations and the hide and show will work

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $(".mark").bind("mouseover", function () {
                var index = $(this).attr("id").replace("mark", "");
                $(".icontent" + index).show();
            });
            $(".mark").bind("mouseout", function () {
                var index = $(this).attr("id").replace("mark", "");
                $(".icontent" + index).hide();
            });
        });
    </script>
    <table border="1">
        <tr>
            <td align="left" valign="top">
                <a href="#" class="mark" id="mark1">hover anchor 1</a>
            </td>
            <td align="left" valign="top">
                <a href="#" class="mark" id="mark2">hover anchor 2</a>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" height="50">
                <div class="icontent1" style="display: none">
                    lorem ipsum dolor sit amet......
                </div>
            </td>
            <td align="left" valign="top" height="50">
                <div class="icontent2" style="display: none">
                    lorem ipsum dolor sit amet......
                </div>
            </td>
        </tr>
    </table>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Show hide multiple DIV elements on mouseover using jQuery

Company

Explore

Follow us

Contact Us