We Keep Coding

How to delete a div when selecting any image on page using addEventListener (Javascript)?

My assignment requires me to generate a picture with words on it. It also requires me to have it deleted when clicked. I have got it to generate the picture and words to work, however I can't delete the div wrapper when the child image is clicked.
I understand I could create the addEventListener to delete the div when the div is clicked, however my div currently expands to the entire row. I was able to make the div the size of the image, however I couldn't get the meme library to look presentable. With a better understanding of css positioning, grid, flexbox, etc. I am sure I could make it work but right now, I need to move on with my course! Why is my code not allowing me to delete the meme when the image is clicked? Also, if anyone knows how to correctly center the "click to delete" hover text, I will would be VERY grateful!
const form = document.querySelector('#addmeme');
const imageUrl = document.querySelector('#imageurlinput');
const topTextInput = document.querySelector('#tptextinput');
const bottomTextInput = document.querySelector('#btmtextinput');
const submitBtn = document.querySelector('#submitbutton');
const images = document.getElementsByTagName('img');
form.addEventListener('submit', function(e) {
// prevent website change
e.preventDefault();
// create new meme div and append as child to new meme library
const newMeme = document.createElement('div');
const memeLibrary = document.querySelector('#memeLibrary');
newMeme.classList.add("meme");
memeLibrary.appendChild(newMeme);
// create img element. add class and the image's URL to the img
const memeImage = document.createElement('img');
memeImage.classList.add("memepic");
memeImage.src = imageUrl.value;
newMeme.appendChild(memeImage);
// create div for the toptext of meme and add class and innterHTML of user's input
const topText = document.createElement('div');
topText.classList.add("toptext");
topText.innerHTML = topTextInput.value;
newMeme.appendChild(topText);
// create div for the text when user hovers over the image
const hoverText = document.createElement('div');
hoverText.classList.add("hoverText");
hoverText.innerHTML = "Click to Delete";
newMeme.appendChild(hoverText);
// create div for the bottom text of meme and add class and innterHTML of user's input
const bottomText = document.createElement('div');
bottomText.classList.add("bottomtext");
bottomText.innerHTML = bottomTextInput.value;
newMeme.appendChild(bottomText);
// clear the input fields
imageUrl.value = '';
topTextInput.value = '';
bottomTextInput.value = '';
})
// delete meme when clicked
images.addEventListener("click", function(e) {
e.target.parentElement.remove();
})
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
body{
background-color: #E1EFE6;
margin: 0px;
}
#title{
text-align: center;
color: #000411;
font-family: 'Poppins', 'Roboto';
font-size: 3em;
margin: 20px 0px 0px 0px;
}
#instructions{
text-align: center;
color: #000411;
font-family: 'Roboto';
font-size: 1em;
}
.userinputsection{
margin: 20px auto;
width: 500px;
}
.userinputsection input{
display: inline-block;
text-align: left;
float: right;
width: 360px;
}
.userinputsection label{
display: inline-block;
text-align: right;
font-family: 'Roboto';
font-size: 1em;
}
#submitbuttondiv{
margin: 10px auto;
display: inline-block;
}
#submitbutton{
font-family: 'Roboto';
}
#memeLibrary{
display: flexbox;
padding: 5px;
background-color: white;
height: 100%;
width: 100%;
}
.meme{
position: relative;
max-width: 400px;
margin: 10px auto;
}
.memepic{
max-width: 400px;
border-radius: 10px;
border-width: 1px 0px 0px 1px;
border-color: lightgray;
border-style: solid;
box-shadow: 5px 5px 2px lightgrey;
opacity: 1;
}
.memepic:hover{
opacity: 0.5;
transition: .5s ease;
}
.toptext{
position: absolute;
color: white;
-webkit-text-stroke: 2px black;
font-size: 2em;
font-family: Impact;
width: 100%;
text-align: center;
top: 0px;
margin-top: 10px;
}
.memepic:hover ~ .toptext{
-webkit-text-stroke: 2px gray;
transition: .5s ease
}
.bottomtext{
position: absolute;
color: white;
-webkit-text-stroke: 2px black;
font-size: 2em;
font-family: Impact;
width: 100%;
text-align: center;
bottom: 0px;
margin-bottom: 10px;
}
.memepic:hover ~ .bottomtext{
-webkit-text-stroke: 2px gray;
transition: .5s ease
}
.hoverText{
visibility: hidden;
opacity: 0;
position: absolute;
color: black;
font-size: 2em;
font-family: Poppins;
width: 100%;
text-align: center;
vertical-align: middle;
top: 50%;
margin: 0;
padding: 0;
}
.memepic:hover ~ .hoverText{
visibility: visible;
opacity: 1;
transition: .5s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Meme Generator</title>
<link rel="stylesheet" href="Meme.css">
</head>
<body>
<h1 id="title">Meme Generator</h1>
<h1 id="instructions">Fill out the form below to create memes!</h1>
<form action = "" id="addmeme" name="addmeme">
<div class="userinputsection">
<label for="imageurlinput">Image URL</label>
<input type="text" name="imageurlinput" id="imageurlinput"></br>
</div>
<div class="userinputsection">
<label for="tptextinput">Text on Top</label>
<input type="text" name="tptextinput" id="tptextinput"></br>
</div>
<div class="userinputsection">
<label for="btmtextinput">Text on Bottom</label>
<input type="text" name="btmtextinput" id="btmtextinput"></br>
</div>
<div id="submitbuttondiv">
<input type="submit" id="submitbutton" value="Create Meme!"></br>
</div>
</form>
<div id="memeLibrary">
<div class="meme">
<img class="memepic" src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt="Puffin">
<div class="toptext">THIS IS THE TOP TEXT</div>
<div class="hoverText">Click to delete</div>
<div class="bottomtext">THIS IS THE BOTTOM TEXT</div>
</div>
<div class="meme">
<img class="memepic" src="https://dickinsoncountyconservationboard.com/wp-content/uploads/sites/2/2019/01/Common_Snapping_Turtle_36290540871-1024x767.jpg" alt="Puffin">
<div class="toptext">THIS IS THE TOP TEXT</div>
<div class="hoverText">Click to delete</div>
<div class="bottomtext">THIS IS THE BOTTOM TEXT</div>
</div>
</div>
<script src=Meme.js></script>
</body>
</html>

You can't add listeners to a NodeList:
// getElementsByTagName returns a NodeList
const images = document.getElementsByTagName('img');
// blows up
images.addEventListener("click", function(e) {
e.target.parentElement.remove();
})
You could, however, iterate over the items and add a listener to each entry:
const images = document.getElementsByTagName('img');
images.forEach(img => img.addEventListener("click", function(e) {
e.target.parentElement.remove();
}))

Two event for background image

I'm trying to create something to change wallpaper by clicking on picture or by clicking on a button.
Separately it's works, but when I click on a thumbnail wallpaper change and when I click on button I select a picture and it's ok but after if I want to click again on a thumbnail the problem appears, if someone can help me that would be very appreciated.
I created an example
$('ul#images li').click(function(e){
$('ul#images li').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
var source = $(this).children('img').attr('src');
$('.outer').css('background', 'url('+source+')');
});
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
}

clicking on the pictures sets a background for the .outer div, the button sets the background for an image tag. Why not have the button set the background for the .outer div too? Then remove the image tag altogether. I think then it would work as you expect, example below.
In the below example...
I changed setting background, to setting backgound-image so setting it does not override the other background css.
$('ul#images li').click(function(e){
$('ul#images li').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
var source = $(this).children('img').attr('src');
$('.outer').css('background-image', 'url('+source+')');
});
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
//$('#myImg').attr('src', e.target.result);
$('.outer').css('background-image', 'url('+e.target.result+')');
}
*, *:before, *:after {
margin: 0; padding: 0;
box-sizing: border-box;
color: white;
font-family: 'Open Sans', sans-serif;
}
html, body {
height: 100%;
width: 100%;
}
ul, ol {
list-style-type: none;
}
a,
a:visited,
a:focus {
text-decoration: inherit;
font-weight: inherit;
color: inherit;
}
.outer {
background: black;
background: url('https://hdfondsdecran.com/image/201609/71/nuage-vue-de-dessus-multicolore-merveilleux.jpg');
background-position: center center;
#include transform(scale(1.1));
background-size: cover;
display: table;
height: 100%;
width: 100%;
position: relative;
z-index: 1;
}
.overlay {
background: rgba(black,0.6);
height: 100%; width: 100%;
position: absolute;
z-index: 2;
left:0;
top:0;
background-repeat: repeat;
}
h1 {
font-weight: 700;
font-size: 7em;
font-size: 8vw;
text-transform: uppercase;
position: relative;
}
h2 {
font-style: italic;
font-weight: 300;
font-size: 1.1em;
font-size: 1.5vw;
}
.inner {
position: relative;
z-index: 3;
display: table-cell;
vertical-align: middle;
text-align: center;
text-shadow: 0 0 20px rgba(black,0.6);
}
button {
background: transparent;
border: 2px solid white;
margin: 5px;
font-size: 0.8em;
font-size: 1.5vw;
padding: 10px 15px;
border-radius: 5px;
font-weight: 400;
cursor: pointer;
#include transition(all 0.4s ease);
}
button:hover {
background: white;
color: black;
}
ul#images li {
display: inline-block;
margin: 10px;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
opacity: 0.5;
}
ul#images li:hover {
opacity: 1;
}
ul#images li.active {
opacity: 1;
}
ul#images li img {
width: 100px;
height: 50px;
display: block;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
<div class="overlay">
</div>
<div class="inner">
<br><br><h2>Change Background Image:</h2><br>
<ul id="images">
<li class="active"><img src="https://img.gadgethacks.com/img/86/37/63601592852769/0/get-ios-10s-new-wallpaper-any-phone.1280x600.jpg" /></li>
<li><img src="https://www.itl.cat/pngfile/big/2-20588_ios-wallpaper-iphone-wallpaper-hd-desktop.jpg" /></li>
<li><img src="https://i.pinimg.com/originals/42/65/79/426579e96e9333ed9518c2fd9d3e5482.jpg" /></li>
<li><img src="https://i.pinimg.com/originals/a1/4d/e0/a14de021c4fa8049d2d798d5b98d7419.jpg" /></li>
<input type="file" id="uploader" />
<label for="uploader">Parcourir</label>
</ul>
</div>
</div>

Toggling an element with JQuery makes part of the parent element dissapear

I'm trying to make a nav bar with jquery, fairly simple, clicking the nav icon brings up a menu on the side, however I need a sub-menu to appear after clicking one of the options, in this case the "equipment we sell" tab. I have no problem with that as I click the tab and it toggles the menu to being visible however, all of the tabs below it become invisible (I'm assuming they don't relocate to below the now visible element). Can someone explain to me why the tabs do not make room for the new list elements. Code below.
jscript
$('.icon-menu').click(function() {
$('.menu').animate({
right: '0px'
}, 200);
$('.equipsell').hide();
});
$('.menu-exit').click(function() {
$('.menu').animate({
right: '-285px'
}, 200);
$('.equipsell').hide();
});
$('.equipment').click(function() {
$('.equipsell').toggle();
});
HTML
<header>
<div class="menu">
<img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
<ul>
<li>Home</li>
<li>About</li>
<li class="equipment">Equipment We Sell</li>
<div class="equipsell">
<li>Audiometers by Inventis</li>
<li>Middle Ear Analyzers by Inventis</li>
<li>Delfino Video Otoscopes by Inventis</li>
<li>Daisy by Inventis</li>
<li>Trumpet REM by Inventis</li>
</div>
<li>Contact Us</li>
</ul>
</div>
<div class="main-menu">
<p>Test<br>Website</p>
<img src="img/bars.jpg" class="icon-menu" alt="Menu">
</div>
</header>
So when you click the equipment class/list item from above it lowers down the "menu" class but covers up the contact us list item.
EDIT
Forgot to include css.
CSS
/***** NAV *****/
header {
background-color: #093;
padding-bottom: 5px;
}
header p {
display: inline-block;
font-size: 1.35em;
margin: 10px 0 5px 15px;
font-weight: bold;
padding: 2px;
border: 3px solid black;
}
header a {
color: black;
}
.icon-menu {
width: 35px;
height: 35px;
float: right;
margin: 20px 15px 0 0;
display: inline-block;
}
.menu {
background: #00882B;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu-exit {
width: 35px;
height: 35px;
margin-left: 48%;
}
.menu ul {
border-top: 1px solid #636363;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636363;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
color: #000000;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
}
.menu a {
color: #000000;
font-size: 15px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
}
.active-menu{
position: absolute;
}
.equipsell{
width: 285px;
position: fixed;
}
.equipsell li {
margin: 0;
padding: 0;
line-height: 2.5;
background-color: #c90;
}
.equipsell a{
color: white;
padding: 0;
margin: 0;
}
.bottom-half li {
background-color: #00882B;
}
/***************/

Your class .equipsell is defining the position to be fixed, which causes is to be placed a layer above the other elements.
I guess the code to create the expected result would be:
.equipsell{
width: 285px;
}
JSFiddle updated: https://jsfiddle.net/rc8br5oe/
More about the CSS positions: http://www.w3schools.com/cssref/pr_class_position.asp

one page website with css transition to sweep content in from alternating sides

I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks

I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/

Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
    margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo

Having a problem with selectors

The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}

Have you tried?
$(this+' > .menuItem div')

I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();