Develop Reference

Javascript style not overwriting css

I have a simple HTML drawer that contains product recommendations. Javascript is used to toggle it open and close. In the HTML, there are 2 prices, the regular price and the discounted price. Both are visible on load. The JS is supposed to hide the discounted price(current price), if the current price is the same as the old price. Because then it's not necessary to show both(identical prices). But if there is an offer, it's supposed to show both.
The problem is, my javascript for opening and closing the drawer is working, but the code for hiding/showing both prices aren't. And I know the code is fine because it works on another product recommendation template I'm using(which isn't a drawer, but normal on-page element).
I've tried putting the price-code before the drawer-function code, but then the drawer doesn't respond to clicks and does not open anymore.
When I use Preview in the software I'm using to inject product recommendations(Dynamic Yield), the prices are shown correctly. It's only when I preview it on the website itself, that it doesn't work. Both prices are shown even if they match.
Here is the JS:
(function() {
var container = document.querySelectorAll('.dy-sliding-drawer-container')[0];
var handler = container.querySelector('.dy-sliding-handle');
function toggle() {
if (container.className.indexOf('dy-open') > -1) {
container.className = container.className.replace('dy-open','');
} else {
container.className = container.className.trim() + ' dy-open';
}
}
handler.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggle();
});
})();
var mq = window.matchMedia( "(max-width: 599px)" );
var itemPrices = document.querySelectorAll('.price-box');
for(var i=0; i<itemPrices.length; i++){
var discount_price_element = itemPrices[i].getElementsByClassName("dynamic-price")[0];
var price_element = itemPrices[i].getElementsByClassName("regular-price")[0];
if(parseFloat(discount_price_element.innerHTML) == parseFloat(price_element.innerHTML)){
discount_price_element.style.display = "none";
if (mq.matches) {
price_element.style.fontSize = "16px";
price_element.style.paddingTop = "15px";
} else {
price_element.style.fontSize = "20px";
}
price_element.style.fontWeight = "700";
} else {
price_element.style.textDecoration = "line-through";
price_element.style.paddingLeft = "10px";
}
}
Is there anything I can do to make both codes work together? I've tried putting them in the same function, with no luck.
Here is the HTML(I guess the only relevant code here is the .price-box div, but I'm gonna paste everything in case you need it):
<div>
<div class="dy-sliding-drawer-container" data-dy-strategy-container="">
<div class="dy-sliding-handle">
<div class="dy-sliding-handle-text">
${Title}
</div>
</div>
<div class="dy-sliding-items-container dy-open">
${#Recommendation}
<a href="${Item Link}" class="dy-rv-rcom-item">
<div class="dy-rv-rcom-item-image-container item-${SKU}" style=" background-image: url(${Item Image}); background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;min-height: 50px;
min-width: 50px;">
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">${product_price_dynamic},-</span>
<span class="regular-price">${price},-</span>
</div>
</div>
<!-- button -->
<div class="product-item-actions add-to-cart-button-dy">
<div class="actions-primary">
<form data-role="tocart-form" action="https://www.norli.no/checkout/cart/add/uenc/${uenc}/product/${product_id}/" method="post">
<input type="hidden" name="product" value="${product_id}" tabindex="0">
<input type="hidden" name="uenc" value="${uenc}" tabindex="0">
<input name="form_key" type="hidden" value="${formkey}" tabindex="0">
<button type="submit" title="Handlekurv" class="action tocart primary" tabindex="0">
<span class="tocart--short">Legg til</span>
</button>
</form>
</div>
</div>
<div class="product actions product-item-actions read-more-button-dy" style="display: none !important;">
<div class="actions-primary">
<div class="fieldset">
<div class="actions">
<span class="out-of-stock-view-more lesmer-button" style="color:#FFF; display: none !important;">Les mer</span>
</div>
</div>
</div>
</div>
<!-- button end -->
</a>
${/Recommendation}
</div>
</div>
</div>
And if the CSS is needed, heres is the CSS for the relevant classes(old price and new price:
.price-box{
display: flex;
align-items: flex-end;
}
.dynamic-price{
color:#dd1768;
font-size:18px;
font-weight:700;
letter-spacing:-1.5px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
}
.regular-price{
font-size:14px;
letter-spacing:-1px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
font-weight: 400;
}
Could anybody help me out? Keep in mind that the Javascript works fine for recommendation widgets which loads on-page, but not with this click-to-open drawer. Appreciate any help.

Your script does basically work - provided the variables in your template have been
replaced by actual values before the markup is rendered into the DOM. I have modified your data a little bit to demonstrate the correct behaviour on some same-price and some differing-price .price-box examples.
I also took the liberty of shortening your very verbose scripts. I have probably gone a bit too far, especially my .reduce() construct is not easy to read. But look at it as an extreme way of avoiding creating variable names.
(function(){
var container = document.querySelector('.dy-sliding-drawer-container');
container.querySelector('.dy-sliding-handle').onclick=e=>
container.classList.toggle("dy-open");
})();
// var mq = window.matchMedia( "(max-width: 599px)" );
document.querySelectorAll('.price-box').forEach(p=>{
[...p.querySelectorAll("span")].reduce((a,c)=>a.style.display=(a.textContent==c.textContent?"none":""))});
.dy-open {background-color:yellow}
.price-box{
display: flex;
align-items: flex-end;
}
.dynamic-price{
color:#dd1768;
font-size:18px;
font-weight:700;
letter-spacing:-1.5px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
}
.regular-price{
font-size:14px;
letter-spacing:-1px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
font-weight: 400;
}
<div>
<div class="dy-sliding-drawer-container" data-dy-strategy-container="">
<div class="dy-sliding-handle">
<div class="dy-sliding-handle-text">
${Title}
</div>
</div>
<div class="dy-sliding-items-container">
${#Recommendation}
<a href="#${Item Link}" class="dy-rv-rcom-item">
<div class="dy-rv-rcom-item-image-container item-${SKU}" style=" background-image: url(${Item Image}); background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;min-height: 50px;
min-width: 50px;">
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">50,-</span>
<span class="regular-price">50,-</span>
</div>
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">50,-</span>
<span class="regular-price">60,-</span>
</div>
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">60,-</span>
<span class="regular-price">60,-</span>
</div>
</div>
<!-- button -->
<div class="product-item-actions add-to-cart-button-dy">
<div class="actions-primary">
<form data-role="tocart-form" action="https://www.norli.no/checkout/cart/add/uenc/${uenc}/product/${product_id}/" method="post">
<input type="hidden" name="product" value="${product_id}" tabindex="0">
<input type="hidden" name="uenc" value="${uenc}" tabindex="0">
<input name="form_key" type="hidden" value="${formkey}" tabindex="0">
<button type="submit" title="Handlekurv" class="action tocart primary" tabindex="0">
<span class="tocart--short">Legg til</span>
</button>
</form>
</div>
</div>
<div class="product actions product-item-actions read-more-button-dy" style="display: none !important;">
<div class="actions-primary">
<div class="fieldset">
<div class="actions">
<span class="out-of-stock-view-more lesmer-button" style="color:#FFF; display: none !important;">Les mer</span>
</div>
</div>
</div>
</div>
<!-- button end -->
</a>
${/Recommendation}
</div>
</div>
</div>
Explanation:
The .reduce() over all the <span>s in a .price-box div relies on the fact that the "reduced price" span always comes before the "regular price" one and that you will always have exactly two elements. When reduce() is called without the second (starting value) argument it takes the first array element (the "reduced price" span) as the starting value (a). The (only) "current" value in the iteration (c) will then be the regular price span. When the .textContent of both elements are the same the a span will be hidden, otherwise it will remain visible.

How to zoom in/zoom out each image in each div with jquery and scale (css)?

I am trying to create a zoom in / zoom out function for images in an article for the website www.nhadatsonnghia.com. When everything worked fine, an error occurred that jquery only works for the first image in the first tag, and the images in each subsequent tag cannot zoom in / zoom out. After running only the first image has class style="transform: scale (1);".
You can see it working here
So how should I fix to zoom in/zoom out each image in each div? I would appreciate it if you suggest me how to fix this!
Thanks very much!
Here is the code
Jquery
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail #img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('#img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
HTML
<div class="post-header">
<div class="desc-image-list">
<div class="full">
<div class="natural-thumbnail">
<img id="img" src="image1.img"> // After running only the first image has class style="transform: scale (1);"
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 600px;">
<img id="img" src="image2.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 0;">
<img id="img" src="image3.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
</div>
</div>
</div>
CSS
#nav {position: sticky; bottom: 20px; left: 50%; margin-left: -50px;}
#nav input {padding: 5px; font-size: 15px; cursor: pointer;}

In addition to #freedomn-m answer.
You can use img tag as a css selector .natural-thumbnail img you don't need any class. update below js and will work fine.
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('.natural-thumbnail img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});

Id of element should be unique on one html page.
you can use this
$(this).parent().siblings('img').data('scale', nScale).css('transform', 'scale('+nScale+')');

Transition issue CSS and JS

I want to setup a animation for the backdrop-filter property. When I use plain CSS it works but when I toggle the class in JS it doesn't work anymore.
I have tried to isolate the problem but I don't understand how to solve it.
MENU HTML
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
CONTACT HTML
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>
CSS
#contact-wrapper{
display: block;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: backdrop-filter 1.5s;
}
#contact-wrapper.hide{
display: none;
backdrop-filter: blur(0px);
transition: backdrop-filter 1.5s;
}
JS
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
I want the backdrop transition working.
Can anyone help me? Thanks!

Answer:
You can't animate the Display property.
You can simulate this by using other properties like opacity, visibility, and adjusting height and/or width. Often used is setting the opacity and height to 0. This causes a similar effect to display: none since it causes the element to effectively remove the space it takes up in the DOM while rendering it invisible. Note You may also need to set padding, width, and margin to 0 if you truly want it to be as minimally existent in the DOM as possible.
You also can't transition just one property like backdrop-filter when some other altered property causes the element to be invisible. why? because it's interpreted by the Browser as "immediately make this element invisible while transitioning the other properties*." Basically it makes the whole operation pointless.
The syntax in your case to add multiple properties to transition is something like this:
transition: prop time, prop time, prop time;
If all altered properties are to be transitioned you can also just use:
transition: all 1.5s;
Example:
NOTE I updated with your menu code. I don't know where the menu is located, but to get it work with the demo code I had to alter the z-index depending on if hide was applied. This is because of the fixed top-left nature of the contact-wrapper. Depending on your markup you may not need to alter this or may need to alter it differently.
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
#contact-wrapper{
display: block;
opacity: 1;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 1.5s, margin 1.5s, padding 1.5s, height 1.5s, backdrop-filter 1.5s;
}
#contact-wrapper.hide{
opacity: 0;
height: 0;
padding: 0;
margin: 0;
z-index: -1;
backdrop-filter: blur(0px);
}
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>

CSS Transformation causing scroll back/flash

Not completely sure how to explain what's going on. I'm trying to do a transformation on my search bar after it's submitted. The CSS and HTML are pretty large so I'm linking to CodePen to see in action, but I'll post the JS/CSS here as well.
I'd like to do something 'fancy' with the search bar, while the results pop up on the same screen so I thought 'transitions'.
CSS
.postSearch{
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
HTML Form
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
JS
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
There is a lot more to this page in production which is why some of the IDs etc don't make sure. I feel like using 'toggleClass' is a better idea for the myForm/postponed swap also. (I do this so hitting 'Go' again doesn't re-submit the form.
The codepen is located here - If you notice when you hit 'go' you'll see a scroll bar periodically pop up. On smaller resolutions it happens, on 4K it happens. On the website it actually is causing the background image to 'shake' and snap around.
I'm not too familiar with transitions, but I followed the documents pretty specifically. I'll end up inverting it to get the search bar to go back since it kind of 'snaps' back right now. Would appreciate any advice.
Thanks.

It is because of the component is going out from document. Try by adding overflow: hidden to it's parent container. Please try this and let me know if this is helpful for you.
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
html,
body {
position: relative;
height: 100%;
margin: 0;
/* temporary class */
}
.overflow-hidden {
overflow: hidden;
position: relative;
min-height: 100%;
}
.postSearch {
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden">
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
</div>

Scroll occurs because while form is spinning it goes out parent.
One possible solution is to add overflow: hidden for the time of animation.
body.transitionActive{
overflow: hidden;
}
js
[...]
$('#myForm').addClass('postponed');
$('body').addClass('transitionActive');
setTimeout(function(){
$('body').removeClass('transitionActive');
}, 3000);
$('#myForm').removeClass('myForm');
[...]
See how it works here: http://codepen.io/anon/pen/ALNLak

Dynamic alignment of div with array containing checkbox

First, I would apologize for my grammar I'm french (and like I already said frenchy su** in grammar, but I'm trying to improve myself)
So, I've an table with array who is automatically generated with the upload of an excel list. The table who is generated contain checkboxes. When you click on a checkboxes you've an Div who appears. In this div you can wrote a text who is reported in the excel document and you've to submit for validation. Summary this is for a guest check-list.
The length of the table is variable and I would align the Div with the checkbox who is clicked. (You click and just to the right there is the div who appears).
I've try with a fixed position but this is not enought precise. Somebody can tell me how I can do this or where I've to search ?
<? header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="test.css" media="all"/>
<title>Ceci est une page HTML de test</title>
</head>
<script type="text/javascript" language="JavaScript" src="find5.js">
<form action = "check.php" method="GET">
<div class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" /><label>Vestiaire</label> <input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
Cacher</div>
<ul>
<?php
error_reporting(0);
include("script.php");
$i = 1;
foreach ($invites as $invite)
{
if($invite[0] != '' && $invite[1] == '')
{
echo ' <li>
<div class="circle" style="float:left;"></div>
<h4>'.$invite[0].'</h4>
<input class="show_hide" name="checkbox[]" id="'.$i.'" value="'.$i.'" type="checkbox" style="visibility:hidden" />
<label for="'.$i.'"><i class="fa fa-check"></i></label>
</li>';
}
$i++;
}
Hum I don't know if this is more clear with the code, but the Div wich I want dynamically align is "SlidingDiv"
Thanks !

First of all, the HTML structure with some useful classes.
<form action = "check.php" method="GET">
<!-- This div will never be used directly but rather cloned-->
<div id="originalSlidingDiv" class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" />
<label>Vestiaire</label>
<input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
<!-- We add different classes to the "Cacher" button and to the checkbox as they must behave a bit differently-->
Cacher
</div>
<ul>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">bla</h4>
<input class="show_hide_cb" name="checkbox[]" id="a" value="a" type="checkbox" />
<label for="a"><i class="fa fa-check"></i></label>
</li>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">blo</h4>
<input class="show_hide_cb" name="checkbox[]" id="b" value="b" type="checkbox" />
<label for="b"><i class="fa fa-check"></i></label>
</li>
</ul>
</form>
Then, the jQuery to make it work properly:
$(document).ready(function(){
var originalSlidingDiv = $('#originalSlidingDiv'),
slidingDiv;
$(".slidingDiv").hide();
$(".show_hide").show();
// When clicking each item's checkbox.
$('.show_hide_cb').on('click', function() {
// Check if we appended the slidingDiv already.
slidingDiv = $(this).parent().find('.slidingDiv');
// If not, we clone it, remove its id then append it to the parent (.item).
if (slidingDiv.length === 0) {
slidingDiv = originalSlidingDiv.clone(true, true)
.attr('id', '')
.appendTo($(this).parent());
}
// Finally we toggle display.
slidingDiv.slideToggle();
});
// When clicking the hide button (Cacher).
$('.show_hide_btn').on('click', function(e) {
e.preventDefault();
// $(this).parent() is the .slidingDiv element, we toggle display.
$(this).parent().slideToggle();
// $(this).parent().siblings('.show_hide_cb') is the checkbox, we want it to be unchecked.
$(this).parent().siblings('.show_hide_cb').attr('checked', false);
});
});
You can find enough explanations in the comments. Basically this will clone the .slidingDiv when necessary, append it to the clicked item, and toggle its display, but also will hide the slidingDiv when we click the button "Cacher". It will also uncheck the checkbox to get back to the initial state.
Finally, the little CSS to make it look as you wanted:
.slidingDiv {
text-align: center;
float: left;
}
.item {
margin-top: 1em; /* add some margin as it's removed from the h4 */
}
.circle {
float: left;
}
.item-name {
display: inline-block;
margin-top: 0; /* remove the margin to allow alignment */
}
JSFiddle: https://jsfiddle.net/superbiche/fhqcvbpe/
And yeah, I'm french too :)

There's going to be a lot of different answers to this question! Here's another simple way of doing this.
The reason fixed positioning doesn't work is because fixed always aligns to the window. Meaning, adding position: relative; to its parent element doesn't bind a fixed element. So you have to work with absolutely positioned elements or with pseudo elements.
$('.radio-list a').click(function() {
$('#popup').css({top: $(this).parent().offset().top, left: $(this).parent().position().left + $(this).parent().outerWidth()});
console.log($(this).position(), $('#popup').position());
});
.radio-list {
position: relative;
height: 500px;
width: 25%;
overflow-y: scroll;
}
.radio {
height: 50px;
line-height: 50px;
border: 1px solid #1e1e1e;
}
#popup {
position: absolute;
border: 1px solid red;
width: 300px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="radio-list">
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
</div>
<div id="popup">
Hi I'm the popup
</div>