Showing different content in the same Div
Hello there
Although i've been using jQuery for some months now, i'm a bit stuck on this small but big task i'm trying to solve on my website.
I've a submenu showing the different continents and then i have a sub-submenu, with their respective countries, each one inside another div and all the data is being fetched from the database using PHP.
For example for the div of Europe:
- echo "<div class='nav-column'><a href='#' class='continente'>" .($Cont). "</a></div> ";
So far so good and all the continents are showing. Then i have the div with the European countries:
- <div id="cnt_submenu_" data-id="cont_submenu" class="submenu_continente active">
- <span class="close">x</span>
- </div>
And then the jQuery code to show the respective div depending if i hover the link of Europe, Africa etc:
- var country = $(this).attr('data-id');
- //Open and close div with list of countries
- $('.continente').hover(function(){
- menuHide('.submenu_continente' + country );
- $('#cnt_submenu' + country ).show();
- },function(){
- $('#cnt_submenu' + country).mouseleave( function() {
- $(this).hide();
- });
- });
Unfortunately nothing is showing. What am i missing?
Thanks for pointing me in the right direction.