NZMAI NZMAI - 3 months ago 12
Javascript Question

Display only one div on hover

I'm doing a project using Wikipedia API where user can type some name in search and get results from Wikipedia. So i have most of the work but one issue got in my way. When i hover "each-list" div, "show-more" div is displayed from the right side of the parent div which is "each-list" div. Then i hover over "show-more" div which causes appearance of another div called "titleDesc". The problem is when i hover over "show-more" div all "titleDesc" divs displayed whereas i need only one related div to appear.

Javascript code

var apiKey = "*****";
var appendApiKeyHeader = function(xhr) {
xhr.setRequestHeader('Api-Key', apiKey)
};

var name = "Eminem";
var searchRequest = {
"phrase": name
}

$('#search').click(function() {

var foundArticle = $("#query").val();

console.log(foundArticle);

var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback';

// Clear content before AJAX call
$(".list-container").html("");

$.ajax({
url: wikiUrl,
dataType: "jsonp",
success: function(response) {
var artList = response[1];
console.log(artList);
for (var i = 0; i < artList.length; i++) {
var title = artList[i];
console.log("Number" + " " + i + " " + title);
var titleDesc = response[2][i];
console.log("Number" + " " + i + " " + titleDesc);
var url = 'http://en.wikipedia.org/wiki/' + title;

$(".list-container").append(
'<span class = "each-list">' +
'<a href="' + url + '" target="_blank" >' +
title +
'</a>' +
'<div class="show-more">' +

'<div id="show-more-inner">MORE</div>' +

'</div>' +

'</span>' +

'<div class="titleDesc">' + '<p>' + titleDesc + '</p>' + '</div>'

);

} // end of "for" loop

$('.show-more').hover(

function() {
$('.titleDesc').show();
}

);
} // success function end

}) // ajax function

return false;

}); // click function

function GetSearchResults() {
$.ajax({
type: "GET",
beforeSend: appendApiKeyHeader,
url: "https://api.gettyimages.com/v3/search/images",
data: searchRequest
}).success(function(data, textStatus, jqXHR) {
var uri = data.images[0].display_sizes[0].uri;
$(".images").append('<img src = "' + uri + '" />');
console.log(data);

}).fail(function(data, err) {

console.log(data);

});
}

GetSearchResults();


This code is responsible for display of "titleDesc"

$('.show-more').hover(

function() {
$('.titleDesc').show();
}

);


How to make only this div to display?

If you want more details about the project feel free to review it.
enter image description here

Answer
$(this)                 // the ".show_more" element which triggered the "hover" event
  .parent(".each-list") // the enclosing ".each-list" <span> (*)
  .next(".titleDesc")   // the next sibling with class "titleDesc"
  .show();

(*) The generated markup is invalid. The <span> element is only allowed to contain other inline elements and no block elements (<div>)