We Keep Coding

Hide a div if paragraph does not contain any text

I'm doing a project using Wikipedia API. Typing a word in seach bar displays a list of items. Like in the picture below.
When a user hover over "more" div an additional content is dispalyed below. like that.
However some items in blue color do not containany information, that is, empty. So i want for those items which do not contain any additional information do not show "more" div. So i have written a code. But unfortunately it does not work.
if ($('.list-container>div.titleDesc>p').is(':empty')) {
$(".show-more").hide();
}
Cannot figure out what is wrong so will appreciate any help. If you need more information please refer to my project in Codepen.

jQuery :empty() is a selector; hence, it works on jQuery elements. So, you need to update this line:
$(this).text().is(':empty')
With this line:
$(this).is(':empty')
Here is a Working Demo, I have just updated this JS line, and add a container div element.

You can use like this
$('.list-container>div.titleDesc>p').each(function() {
if ($(this). text() == "" ) {
$(this). hide() ;
}
} )
You need to use this code after printing searching results

adding sharing buttons (like "addtoany") to a single image in lightbox plugin

I have developed my own theme in wordpress using bootstrap.
I am using lightbox for image gallery and I am both trying to add sharing buttons on a single image opened in pop up,both trying to excercise a bit in using Jquery.
The single image in lightbox of course comes without the option of sharing buttons for social network.
the div that contains the image is an element to consider, and then there is the code of the snippet. i tried to do this...
$sharingButtons = $("</div>");
$sharingButtons.css({top: 100, left: 20, 'absolute'});
$sharingButtons.addClass("");
$sharingButtons.appendTo( '.lb-outerContainer' );
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id=''> )etc... (here all the snippet code of addtoany)...
</div></div>");
$('img.lb-outerContainer').css("opacity", "0.8");
the element $sharingbuttons is the div that contains the snippet...
it does not work., anyone has better ideas?
I use last version of Jquery.
thanks
Paolo
p.s. do i have to use
"Insert After" to add a div beside the lb-outer container_?
you can view my website here
http://www.paolobergomi.it/new-gallery/indoor-portraits/
if yo uclick on an image, i wish that on the right, in vertical layout..just attached to the image, appear the list of the sharing buttons
i guess insertAfter could be an option? thanks to EO
added:
I would start like this?
$("
and then add the snippet code of addtoany in the new div?
any tips? thanks
paolo

After you append your a2a div code, you need to execute the function a2a.init('page') because the addtoany script need to add your new code. First of all, insert a class a2a_target, an ID for the div and create a javascript code like above:
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id='myShareLinks'> )etc... (here all the snippet code of addtoany)...
a2a_config.target = '#myShareLinks';
a2a.init('page');
Note: a2a_config and a2a are global variables created by addtoany script.

Current menu item

I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/

A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/

You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.

hide and show div tags

I'm trying to implement a switch/tracker to my HTML5 game.A short description of what I want jQuery to do for me: hide all div tags and show the ones I need (body, output, language, footer and a specific level f.i. Level 1 Once this has been shown, it needs to show the next level f.i. Level 2 on clicking a bottom.
But I don't know how to code this. So can anyone please help me?
So far I have written this:
jQuery('document').ready(function() {
function hideshow() {
$("div").hide(99999999);
$("#container").show(9999999);
$(".output").show(9999999);
$("#languages").show(9999999);
$("footer").show(999999);
$("#L1").show(999999);
};
});

It might be better practice to hide the div's with css, or even replacing the Level 1 with Level 2 content (ajax based for example).
If you cannot do that, give all level div's a class, and only hide those with
$('.level').hide(); $('#level1').show();
The way to make a function show something is to do
$('#level2').show();

Use the jQuery css method:
$("div").css("display", "none"); //for hiding
$("div").css("display", "block"); //for displaying

Trigger multiple jQuery scripts on current active element

I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!

http://jsfiddle.net/oscarj24/yLqnd/13/

Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});

I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/

simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});