Question

I have a jQuery code, that is working as I expect it to work to a certain point.
Here is the fiddle

Three menu items, when hovered over, a black square and additional info appears in the yellow box.
When clicked menu 1 & 3, a green circle appears before the menu.
When clicked menu 2, a search bar appears also and gets in focus with a little bit of delay.

Until this point everything is fine.

What I want is, for example:

-when ‘menu_item’_2 is clicked and I move away the mouse over another item, in the yellow field ‘info_2’ must be shown.

So I should somehow drop the hover after a click has been made.
And when I click another menu_item it should show the corresponding info in the yellow box.

I’m not an expert in jQuery, so maybe the code is must be done some other way.

Anyway, thanks for your help!

$(function() {

$("#search").hover( 
    function() {
        $("#search_info").show();
        $("#arrow").show().css('top', 230);
        $("#fade_search").animate({ opacity: 0.4},50);
    },
    function() {
        $("#arrow, #search_info").hide();
        $("#fade_search").animate({ opacity: 1},50);       
    }).click(function(e) { 
             $("#activated").show().css('top', 232);
             var focusDelay = $("input[type=text]").fadeIn(100);            
                 setTimeout(function(){
                     $(focusDelay).focus();
                 },1000);
             e.preventDefault();
            });

$("#list").hover( 
    function() {
        $("#list_info").show();
        $("#arrow").show().css('top', 205);
        $("#fade_list").animate({ opacity: 0.4},50);
    },
    function() {
        $("#arrow, #list_info").hide();
        $("#fade_list").animate({ opacity: 1},50);

    }).click(function(e) {  show up
             $("#activated").show().css('top', 209 );
             e.preventDefault();
            });

$("#program").hover( 
    function() {
          $("#program_info").show();
          $("#arrow").show().css('top', 255);
          $("#fade_program").animate({ opacity: 0.4},50);
      },
    function() {
          $("#arrow, #program_info").hide();
          $("#fade_program").animate({ opacity: 1},50);

    }).click(function(e) {
             $("#activated").show().css('top', 261 );
             e.preventDefault();
             });
});

Answer 1

I have changed your entire jQuery code. See this jsFiddle for the rework: http://jsfiddle.net/jUHNF/8/

Note: I assumed you wanted to only show the search box for menu item 2, if that’s not the case, just remove the following:

    else {
        $("input[type=text]").hide();
    }

The code itself should be pretty well commented (maybe a bit too well).

As you can see I have moved all functions into ONE hover/click event, instead of making them into separate events depending on what menu item you clicked on. The idea here is to keep it clean and simple.

What if you want to make further changes to your menu clicks (for example make the currently clicked item italic)? Then you would need to make the change in three places, once for each menu event. If you add a new menu item you would need to duplicate the code once more as well… and so on. By making sure that most of your logic can go under the same event you won’t have to duplicate code like this (Don’t Repeat Yourself!)

Edit: Pasting jsFiddle code for future reference.

    <div id="container">
        <div id="modes">
            <div class="elements" id="list">
                <a href="">menu_item_1</a>
            </div>
            <div class="elements" id="search">
                <a class="link" href="">menu_item_2</a>
            </div>
            <div class="elements" id="program">
                <a href="">menu_item_3</a>
            </div>
        </div>
        <div id="infobox">
            <p id="list_info" class="infobox">
                info_1
            </p>
            <p id="search_info"class="infobox">
                info_2
            </p>
            <p id="program_info"class="infobox">
                info_3
            </p>
        <form method="post" action=""></form>
            <input type="text" name="search_field"
            placeholder="type here" />
        </form>
        </div>
        <div id="arrow"></div>
        <div id="activated"></div>
    </div>

JS:

$(function() {
    $(".elements").mouseover(
        function() {
            activateMenuItem($(this));
        }
    ).click(function(e) {
        var bulletTop = $(this).position().top + 207; 
        $("#activated").show().css("top", bulletTop);

        //turn off the hover function for all menu items
        $(".elements").off("hover"); 

        if($(this).attr("id") == "search") {
             var focusDelay = $("input[type=text]").fadeIn(100);            
             setTimeout(function(){
                 $(focusDelay).focus();
             },1000);
        }else {
            $("input[type=text]").hide();
        }
        activateMenuItem($(this)); //do same as on hover
        e.preventDefault();
    });

    function activateMenuItem(item) {
            var arrowTop = item.position().top + 205;
            var boxName = "#" + item.attr("id") + "_info";              
            $("#arrow").show().css("top", arrowTop);
            $(".infobox").hide();
            $(boxName).show();
    }
});