Click here to Skip to main content
15,941,828 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
the code below works fine for showing and hiding div tag on link mouseenter,
My problem is changing the the font-size and color of the link selected.
(that is Lemon, Lime, Bitters).

XML
<html>
<head>
    <title>hide/show </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //add the click event to each element with the toggle class
            $('a.toggle').mouseenter(function () {
                if ($(document).data("toggle-id")) {
                    //item was already selected, hide it
                    $("div.toggle#" + $(document).data("toggle-id")).hide(1);
                }
                //save the new id for later, then show it
                $(document).data("toggle-id", $(this).text().toLowerCase());

                $("div.toggle#" + $(document).data("toggle-id")).slideToggle(1000)

            });
        });
    </script>
</head>
<body>

    <a href="#" id="1" class="toggle">Lemon</a>
    <a href="#" id="2" class="toggle">Lime</a>
    <a href="#" id="3" class="toggle">Bitters</a>

    <div style="height:300px;">
        <div id="lemon" class="toggle" style="width:100%;height:200px;background-color:red; display:none;">Lemons are good<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/WebForm1.aspx">HyperLink</asp:HyperLink></div>
        <div id="lime" class="toggle" style="width:400px;height:200px;background-color:green; display:none;">Lime is very bitter</div>
        <div id="bitters" class="toggle" style="width:400px;height:200px;background-color:green; display:none;">Bitters not good for your health</div>
    </div>
</body>
</html>
Posted

1 solution

See this modified code:
C#
$('a.toggle').mouseenter(function () {
               $(this).toggleClass('active');// Added this line
               if ($(document).data("toggle-id")) {
                   //item was already selected, hide it
                   $("div.toggle#" + $(document).data("toggle-id")).hide(1);
               }
               //save the new id for later, then show it
               $(document).data("toggle-id", $(this).text().toLowerCase());

               $("div.toggle#" + $(document).data("toggle-id")).slideToggle(1000);

           });
           //Added this event
           $('a.toggle').mouseout(function () {
               $(this).toggleClass('active'); 
           });
           //Added this event

Or if you want the class to be applied till the relevant div is active than

C#
$('a.toggle').mouseenter(function () {   
    $('a.toggle').removeClass("active");
    $(this).addClass('active');
    if ($(document).data("toggle-id")) {
        //item was already selected, hide it
        $("div.toggle#" + $(document).data("toggle-id")).hide(1);
    }
    //save the new id for later, then show it
    $(document).data("toggle-id", $(this).text().toLowerCase());

    $("div.toggle#" + $(document).data("toggle-id")).slideToggle(1000);
    
    //mouseout event is not required

});


Now add the class active in page:
XML
<style type="text/css">
   .active
   {
        color:Black;   
        font-size:large;
   }
</style>


Regards..
 
Share this answer
 
v3
Comments
Member 10316149 17-Sep-14 18:53pm    
Thanks Rohan...U saved my day
Member 10316149 17-Sep-14 19:23pm    
@Rohan.. Please I want it to remain selected (active) even if the mouse leave (mouseout) until I select new item.. then the new item becomes selected (always showing the selected item)
Thanks7872 18-Sep-14 1:35am    
That is what the second code snippet does.
Member 10316149 18-Sep-14 20:21pm    
Ok works good thanks a lot
Can it be also that, if an already selected item is selected again it should rather hide the div.
for now it reloads the div if its selected again
thanks for the concern.



[no name] 20-Sep-14 11:50am    
@Rohan Leuva My vote of 5

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900