Develop Reference

Testimonial slider - css

I have the following code:
<div id="box">
<div class="wrapper">
<div class="testimonial-container" id="testimonial-container">
<div id="testimonial1" class="active">
<img src="" />
</div>
</div>
<button id="prev" onclick="prev()"><</button>
<button id="next" onclick="next()">></button>
</div>
</div>
#box {
position: relative;
width: auto;
left: auto;
margin: auto;
max-width: 70em;
min-height: 26em;
max-height: 70em;
}
.img-con {
position: absolute;
}
.img-con img {
height: 1px;
width: 1px;
}
.testimonial-container {
margin-top: 1%;
width: 85%;
height: 100%;
position: relative;
margin: auto;
padding: 1.8em 1.2em;
}
.testimonial-container p {
color: #8c8c90;
text-align: center;
font-size: 0.9em;
line-height: 2em;
letter-spacing: 0.05em;
}
.testimonial-container img {
display: block;
margin: 1.8em auto 1.25em auto;
border-radius: 50%;
width: 4.4em;
}
.testimonial-container h3 {
color: #2d3d67;
font-size: 1em;
text-align: center;
}
.testimonial-container h6 {
color: #bcc4da;
font-size: 0.9em;
letter-spacing: 0.03em;
font-weight: 400;
text-align: center;
}
.wrapper button {
font-size: 1.8em;
color: #0a69ed;
height: 2.2em;
width: 2.2em;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
background-color: #ffffff;
border: none;
border-radius: 50%;
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
cursor: pointer;
}
button#next {
right: -1.1em;
}
button#prev {
left: -1.1em;
}
#media screen and (max-width: 650px) {
.wrapper {
font-size: 14px;
}
}
window.addEventListener("load", function() {
document.getElementById("loader").style.display = "none";
document.getElementById("box").style.display = "block";
});
const testimonials = [
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
},
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
},
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
}
];
let f = 0; // current slide
let j = testimonials.length; // total slides
let testimonialContainer = document.getElementById("testimonial-container");
function next() {
f = (j + f + 1) % j;
displayTestimonial();
}
function prev() {
f = (j + f - 1) % j;
displayTestimonial();
}
let displayTestimonial = () => {
testimonialContainer.innerHTML = `
<p>${testimonials[f].testimonial}</p>
<img src=${testimonials[f].image}></img>
<h3>${testimonials[f].name}</h3>
<h6>${testimonials[f].job}</h6>
`;
};
window.onload = displayTestimonial;
This outputs:
The only problem is that for some reason, it cuts out the button at the end.
Expected Output:
How can I fix this? Thanks
I tried to change the width of the #box but it did not affect anything. Im pretty sure the problem is coming from #box but I'm not sure which part directly affects it, since doing width: auto wont change anything either.

I have solved this problem, you can take a look at my version
https://codepen.io/bozzhik/pen/bGKReqm
I tried to wrap it all in a container block and set the margins 50px
<div id="container"</div>
and properties for this block
#container { margin: 50px;}
It turned out what I needed (this is my first help on this site)

Consent Popup not triggering on click

I want a popup to appear when the ID is click on. In the popup there would be two buttons: one to accept, which places a true value in local storage. So the user will not see popup again, if they accepted. The other button is decline, which simply closes the the popup, places nothing in local storage, and will popup again if ID is clicked on again.
Everything in the code is working as I would like, except I would like it to activate on an ID click event. I have tried replacing:
window.onload = () => {
with
$( "#gtranslate_popup" ).click(function() {
HTML
<div id="gtranslate_popup">
Click Here
</div>
<div id="consent_popup" class="hidden">
<div id="consent_popup_content">
<h3>Language Selection</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Pulvinar neque laoreet suspendisse interdum consectetur. Praesent semper feugiat nibh sed pulvinar. Dui nunc mattis enim ut tellus elementum sagittis vitae. Enim blandit volutpat maecenas volutpat blandit. Eget est lorem ipsum dolor sit amet consectetur adipiscing.</p>
<div id="consent-btns"><a id="gt_accept" class="btn btn-default" href="#">Accept</a> <a id="gt_decline" class="btn btn-red" href="#">Decline</a></div>
</div>
</div>
CSS
#consent_popup {
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
&.hidden {
opacity: 0;
}
}
#consent_popup_content {
background-color: #fff;
border: 1px solid #ddddd5;
border-radius: 15px;
height: auto;
left: 15%;
padding: 20px;
position: fixed;
text-align: center;
top: 1%;
width: 70%;
}
#consent_popup_content h3 {
color: #4e4646;
font-size: 2em;
font-weight: 600;
text-transform: uppercase;
}
#consent-popup-content h3:after {
background-color: #4e4646;
content: ' ';
display: block;
height: 1px;
margin: 0.3em auto;
width: 10%;
}
#consent_popup_content p {
font-size: 1.25em;
}
#consent-btns .btn {
font-size: 2em;
margin: 0.25em 0.75em;
text-transform: uppercase;
font-weight: 600;
}
#consent-btns .btn-red {
background-color: #d34727;
}
Script
(function($) {
$(document).ready(function() {
//Language Module Consent Popup
const storageType = localStorage;
const consentPropertyName = 'lang_consent';
const shouldShowPopup = () => !storageType.getItem(consentPropertyName);
const saveToStorage = () => storageType.setItem(consentPropertyName, true);
window.onload = () => {
const acceptFn = event => {
saveToStorage(storageType);
consentPopup.classList.add('hidden');
}
const declineFn = event => {
consentPopup.classList.add('hidden');
}
const consentPopup = document.getElementById('consent_popup');
const acceptBtn = document.getElementById('gt_accept');
const declineBtn = document.getElementById('gt_decline');
acceptBtn.addEventListener('click', acceptFn);
declineBtn.addEventListener('click', declineFn);
if (shouldShowPopup(storageType)) {
consentPopup.classList.remove('hidden');
}
};
//End of Language Module Consent Popup
});
// End of the making the menu navigate with keyboard
})(jQuery);

The most browser disable popups by default.

How to display a div when clicking on a button with js?

-"Maybe this question is one of the duplicate question options as I took it from another answer"
What I am trying to do is that when clicking on a button of an article tag (it is an example) a div with specific information of that article is shown and that the button changes logo. The point is that if that button is clicked, another div from another article cannot be displayed at the same time
The images explain them better:
This is how it should look at first
This is what it should look like when the button is clicked
And this should be seen when clicking on the other button:
(This is how it should look on a cell phone, that's important because of the code I'm going to show)
And this is a code that I found and that more or less works, but it fails when it is for example a cell phone or when wanting to include more articles:
var sharedCont = document.getElementById('shared-container');
var allCont = document.querySelectorAll('#accordion-container');
var jsaccordion = {
init : function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-btn");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select : function () {
var targ1 = this.parentElement.closest('#accordion-container'), // find parent
targText = targ1.querySelector('.accordion-text').innerHTML; // grab text for shared container
if( targ1.classList.contains('active') ){
// when clicked, if active, reset them all
targ1.classList.remove('active');
sharedCont.innerHTML = '';
sharedCont.classList.remove('active');
} else {
// when clicked, reset them all, then activate
for (let i = 0; i < allCont.length; i++) {
var el = allCont[i];
el.classList.remove('active');
}
targ1.classList.add('active');
sharedCont.innerHTML = targText;
sharedCont.classList.add('active');
}
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
overflow: hidden;
}
#accordion-container {
position: relative;
}
#accordion-container button::before {
content: '+' !important;
}
#accordion-container.active button::before {
content: '-' !important;
}
#accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
#accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
/* .accordion-btn.open + .accordion-text{
display: block;
} */
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
display: none;
}
#shared-container.active {
display: block;
text-align: center;
}
#shared-container p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
<div id="shared-container"></div>
</body>
</html>
I repeat, that is taken from this question: how to display different div on button click with JS?
I am very newbie, but I liked the idea of ​​that question and wanted to know if it is possible to do it.

var jsaccordion = {
init: function(target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function() {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
$('.active').removeClass('active')
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if($('body').width() > 768){
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
window.addEventListener('load', function() {
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width : 768px){
.col-6{
max-width: 100%;
min-width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
</body>

Make element to get full page's width

I want to make a front page which is divided into 2 section (1/2 page's width for a section), and whenever someone is hovering over a section it should take 2/3 of the page's width.
When a section gets clicked it should take the width of the whole page.
HTML / CSS / JavaScript:
const leftPanel = document.getElementsByClassName('panel--left')[0];
const rightPanel = document.getElementsByClassName('panel--right')[0];
const mouseEnterHandler = e => {
e.target === leftPanel ? leftPanel.style.flexGrow = '2' : rightPanel.style.flexGrow = '2';
};
const mouseLeaveHandler = e => {
e.target === leftPanel ? leftPanel.style.flexGrow = '1' : rightPanel.style.flexGrow = '1';
};
const clickLeftPanelHandler = e => {
leftPanel.style.flexGrow = '1';
rightPanel.style.flexGrow = '0';
e.stopPropagation();
};
const clickRightPanelHandler = e => {
leftPanel.style.flexGrow = '0';
rightPanel.style.flexGrow = '1';
e.stopPropagation();
};
leftPanel.addEventListener('mouseenter', mouseEnterHandler);
rightPanel.addEventListener('mouseenter', mouseEnterHandler);
leftPanel.addEventListener('mouseleave', mouseLeaveHandler);
rightPanel.addEventListener('mouseleave', mouseLeaveHandler);
leftPanel.addEventListener('click', clickLeftPanelHandler);
rightPanel.addEventListener('click', clickRightPanelHandler);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
text-align: center;
width: 100%;
}
.panel {
display: flex;
flex-direction: column;
height: inherit;
justify-content: space-around;
padding: 25px;
transition: flex-grow 0.75s ease;
}
.panel--left {
background-color: #ffffff;
flex-grow: 1;
}
.panel--right {
background-color: #dddddd;
flex-grow: 1;
}
.panel--left:hover,
.panel--right:hover {
flex-grow: 2;
}
.panel--left:active,
.panel--right:active {
flex-grow: 1;
}
.panel__title {
color: #3a424a;
font-family: 'Roboto Mono', sans-serif;
font-size: 12px;
font-weight: 900;
letter-spacing: 1em;
margin: 0 0 45px 0;
text-transform: uppercase;
}
.panel__header {
color: #3a424a;
font-family: 'Roboto', sans-serif;
font-size: 48px;
font-weight: 900;
letter-spacing: 0.05em;
line-height: 60px;
margin: 0 auto 55px;
max-width: 525px;
text-transform: capitalize;
}
.panel__description {
color: #6d7d8c;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 30px;
margin: 0 auto 50px;
max-width: 625px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<div class="container">
<section class="panel panel--left">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
<section class="panel panel--right">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
</div>
</main>
</body>
</html>
The problem is that I can't get how I can make the second section to shrink to 0. I know how flex-grow works, but it's the closest look that I could get.
Hope I have expressed myself understandably.

Just set width: 0 and dont forget about padding: 0 for the second section when clicking on it

I have made changes to styling to give both hover and clicked achieve 2/3 and 100% respectively (currently added for panel--left but you can copy same for right panel also.).
You just need to do following:
Append class "clicked" on click of element.
Hope this helps.
PS: scrollbar which you see is because of header font-size. But I presume you will handle the font in smaller viewports.
cheers,
Ashok
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100%;
text-align: center;
}
.panel {
height: inherit;
display: inherit;
padding: 25px;
width:50%;
}
.panel--left {
background-color: #ffffff;
}
.panel--left:hover{
flex: 0 0 66%;
}
.panel--left.clicked{
flex: 0 0 100%;
}
.panel--left.clicked+.panel--right{
display:none;
}
.panel--right {
background-color: #dddddd;
}
.panel__title {
color: #3a424a;
font-family: 'Roboto Mono', sans-serif;
font-size: 12px;
font-weight: 900;
letter-spacing: 1em;
margin: 0 0 45px 0;
text-transform: uppercase;
}
.panel__header {
color: #3a424a;
font-family: 'Roboto', sans-serif;
font-size: 48px;
font-weight: 900;
letter-spacing: 0.05em;
line-height: 60px;
margin: 0 auto 55px;
max-width: 525px;
text-transform: capitalize;
}
.panel__description {
color: #6d7d8c;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 30px;
margin: 0 auto 50px;
max-width: 625px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<div class="container">
<section class="panel panel--left ">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
<section class="panel panel--right">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
</div>
</main>
</body>
</html>

i have edited my code, and if i am not wrong, you want " on mouse hover, section will have 2/3 size and on click, the section will be of full size (page size). "
Code to replace :-
const mouseEnterHandler = e => {
e.target === leftPanel ? leftPanel.style.width = '0' : rightPanel.style.width = '0';
};
const mouseLeaveHandler = e => {
e.target === leftPanel ? leftPanel.style.width = '0' : rightPanel.style.widht = '0';
};
const clickLeftPanelHandler = e => {
leftPanel.style.width= '100%';
rightPanel.style.display = 'none';
};
const clickRightPanelHandler = e => {
leftPanel.style.display = 'none';
rightPanel.style.width = '100%';
};
you just need to replace the part of javascript with my code and see if it is what you need. please give me feedback on my answer. if it helps or not. thanks...

Show div in another wrapper while hovering in another

I'm trying to hover on a div inside a wrapper to reveal some text inside another rapper.
I've had a stab at it with the following CSS, to no avail. Here's my attempt thus far:
Fiddle
Here's what I was trying to do with CSS:
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
Javascript may be the way to go here, but I'm a bit of a novice in that regard.
Your help would be greatly appreciated.

Plain JS:
var assodiv = document.getElementById("assodiv"),
assotxt = document.getElementById("assotxt");
assodiv.onmouseover = function(e) {
assotxt.style.display = "block";
};
assodiv.onmouseout = function(e) {
assotxt.style.display = "none";
};
insert this in a <script>-block on bottom of your body-tag

You can try this.
Add this to head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Add this javascript:
var asso = $('#asso');
asso.on('mouseenter',function(){
$('.diagramTextWrapper').prepend('<p class="wrapper_text">test</p>');
});
asso.on('mouseleave',function(){
$('.wrapper_text').remove();
});

you can also hide and show your required div on hover event using jquery:
$(document).ready(function(){
$('#assodiv').on( "mouseenter",function() {
$('#assotxt').show();
$('#assotxt').css("background-color", "white");
$("#assotxt").appendTo($("#assotxt_target"));
});
$('#assodiv').on( "mouseleave",function() {
$('#assotxt').hide();
});
});
.btn {
text-decoration: none;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 0 15px;
line-height: 32px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
text-align: center;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.btn.blue {
background-color: #19ace4;
}
.btn.blue:hover {
opacity: 0.85;
}
.btn.pill {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* - - - MOBLE VIEW - - - */
#media only screen and (max-width: 640px) {
.mobileViewDiagram {
display: block !important;
margin-left: auto;
margin-right: auto;
transform: scale(0.7);
margin-top: -50px;
margin-bottom: -50px;
}
.HybridDiagram,
#leftWrapper,
#rightWrapper {
display: none;
}
}
/* - - - DESKOTP VIEW - - - */
section {
width: 100%;
height: 476px;
margin: auto;
}
div#leftWrapper {
width: 50%;
height: 476px;
float: left;
}
div#rightWrapper {
margin-left: 50%;
height: 476px;
}
.diagramTextWrapper {
display: block;
margin: auto;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
}
.HybridDiagram {
width: 476px;
height: 476px;
}
.HybridDiagram img {
max-width: 100%;
position: absolute;
}
/* Associates */
.HybridDiagram img:nth-child(1) {
left: 0;
top: 0;
}
/* Staff */
.HybridDiagram img:nth-child(2) {
left: 244px;
top: 0;
}
/* Client */
.HybridDiagram img:nth-child(3) {
left: 38px;
top: 301px;
}
.mobileViewDiagram {
display: none;
}
#asso:hover,
#staff:hover,
#client:hover {
opacity: 0.85;
}
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Mobile View -->
<div class="mobileViewDiagram">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572caeb520c647e2e6e352e8/1462546101367/download.png">
</div>
<!-- Desktop View -->
<section>
<div id="leftWrapper">
<div class="HybridDiagram">
<!-- HOVER TO REVEAL TEXT -->
<div id="assodiv">
<img id="asso" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
</div>
<img id="staff" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img id="client" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>
</div>
<div id="rightWrapper">
<div id="assotxt_target"></div>
<div class="diagramTextWrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<!-- HOVER SHOULD REVEAL THS TEXT -->
<div id="assotxt">
This should appear on top of existing text inside rightWrapper.
</div>
</div>
</div>
</section>

#assotxt is not a sibling of #assodiv; also :hover should be applied at .mobileViewDiagram element? You can use :hover:after at .mobileViewDiagram, with content set to text to be displayed. Use top, left properties to render text at appropriate position in viewport.
.mobileViewDiagram:hover:after {
display: block !important;
background-color: white;
content:"This should appear on top of existing text inside rightWrapper.";
position:absolute; /* use `top`, `left`, `right` to set position of `content` */
}
jsfiddle https://jsfiddle.net/vhswx2jg/2/