We Keep Coding

Show and hide tooltips with CSS and Javascript

I use CSS to show and hide tooltips when I hover over them. Now I need this to work for mobile devices with a click function. I got the first tooltip running through toggling a class via Javascript. How can I apply that function for all tooltips now? I have around 30 to 40. Any idea how I can achieve my goal?
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.toggle("website-tooltiptext-visible");
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!

use an extra class.
add this to your css:
.website-tooltiptext-visible {
visibility: visible !important;
}
and replace this class inside your js code:
element.classList.toggle("website-tooltiptext-visible");
PS: NEVER use same id for multiple HTML elements. like ever!
EDIT: use below javascript code to select by class
Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
(element) => {
element.addEventListener("click", () => {
element.classList.toggle("website-tooltiptext-visible");
});
}
);

JavaScript - Class toggling is removing the class and not adding in next click

I have set an eventlistener on i tag with class=glyphcolor What I want to do is that whenever I see an element of class checkglyph1 it has to toggle the class i.e if class is there it has to be removed and if not add.What the checkglyph1 class does is it changes the color of the text.
Actual Result
(image to the output I get)
At first click I see that first element is toggled here by default I have already set it.On next click it gets removed instead of the toggle .
HTML section:
<div class="row datasection">
<div class="todo">
<div class="databox col s6 waves-effect">
<p class="checkglyph1 ">Task to do</p>
<!-- </div> -->
<a>
<i class="material-icons checkglyph checkglyph1 glyphcolor">check</i>
</a>
</div>
</div>
</div>
JS:
var glyph= document.querySelector('.glyphcolor');
var par= document.getElementsByClassName('checkglyph1');
console.log(par[0]);
console.log(par[1]);
glyph.addEventListener('click', function () {
/* body... */
console.log("Qw");
par[0].classList.toggle("checkglyph1");
console.log(par[0]);
par[1].classList.toggle("checkglyph1");
})
CSS:
.datasection .todo .databox {
background-color: teal;
margin-left: 120px;
border-radius: 10px;
position: relative;
display: inline-block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.databox p{
display: inline-block;
}
.databox a .checkglyph{
display: inline-block;
color: yellow;
position: absolute;
left: 90%;
top: 25%;
}
.databox a .checkglyph:hover{
display: inline-block;
}
.databox a .checkglyph1{
display: inline-block;
color: white;
cursor: pointer;
}
.databox .checkglyph1{
color: white;
cursor: text;
}

getElementsByClassName is a LIVE Html Collection. Remove the class, the item is removed from the collection.
var elems = document.getElementsByClassName("foo")
console.log("before", elems.length);
elems[0].classList.remove("foo");
console.log("after", elems.length);
.foo { color: red; }
<div class="foo">1</div>
<div class="foo">2</div>

Looking for ways to refactor my jQuery code for a div toggle I created

I wrote some code with three things in mind:
Highlighting a selection's border using 'on click'.
Selecting one item will remove the highlight from the other item.
The ability to deselect each item on click.
I've managed to get everything working for the most part, but I don't particularly like how complex the code is for the radial dot that appears when one item is selected.
Below is an example of what I'm talking about, particularly I'm looking for ways to refactor the code below into something a little more legible (shorter).
$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
.siblings().children('.radial').children().removeClass('checked');
Here's a working example for more context (line 10):
var raceInternet = false;
var racePhone = false;
var raceTv = false;
$(function() {
var $targetDiv = $('#race-internet > .itembox');
var $radialDot = $('.radial > .center-dot');
$targetDiv.on('click', function() {
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
//Is it possible to refactor Line 10?
$(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
if ($targetDiv.is('.user-selected')) {
raceInternet = true;
} else {
raceInternet = false;
}
})
})
.itembox-container {
display: flex;
}
.boxes-2 {
width: calc((100% - 25px)/2);
margin: 10px;
padding: 10px;
}
.itembox {
position: relative;
display: inline-block;
border: 5px solid #e8e8e8;
border-radius: 10px;
cursor: pointer;
}
.user-selected {
border: 5px solid #E16E5B;
}
.itembox h4 {
color: #22ddc0;
font-weight: 700;
}
span.price {
display: inline-block;
font-weight: 400;
float: right;
color: #22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height: 3;
}
.radial {
position: absolute;
float: right;
height: 35px;
width: 35px;
padding: 2px;
border: 5px solid #e8e8e8;
border-radius: 50%;
top: 43%;
right: 10px;
}
.center-dot {
display: none;
position: relative;
height: 21px;
width: 21px;
background-color: #E16E5B;
border-radius: 50%;
}
.checked {
display: block;
}
.prime-aux:first-of-type {
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<!-- Primary Content Container -->
<div class="prime-aux">
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Primary Content Container End -->
View on JS Fiddle

You can eliminate a lot of your jQuery by just leveraging CSS. Typically, if I want to toggle a feature, I have it either display: block; or display: none; based upon a CSS selector. Then, I just use jQuery to toggle the parent element's class name. So for example:
.item.selected .checkmark {
display: block;
}
.item .checkmark {
display: none;
}
$('.item').click(function(){ $(this).toggleClass('selected') });
JSFiddle

Swapping an image when a toggle has been clicked on

I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example

I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});

Jquery & CSS - Overlapping divs

I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});

Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}

I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.