I am making a selection panel and I am having a hard time figuring out an aspect to it. There are nine boxes and I want the user to be able to click the boxes and when clicked for the hover's format to stay present and then ideally some sort of checkmark or something added into the border of the box. I am completely unsure of how to get the boxes' hover font effect to stay when I take the mouse off.
Does anyone know how I can do this?
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
Create another class name that hold the same css style when hovering, and add those class into clicked element or use toggleClass like following example :
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.box_focused {
background-color: #45ba95;
background-image : url("http://findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
background-position: right top;
background-repeat: no-repeat;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
You can use the following example by using JQuery and using .hover and .addClass():
$(".project-option-boxes").hover(function()
{
$(this).addClass("active");
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.active {
background: #45ba95;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
You can create a class with the same style as the hover, and when one box is clicked, you can add this class to the box.
.project-option-boxes.active {
background-color: #45ba95;
color: #FFF;
}
and to give the class to the boxes,
$(document).on('click', 'project-option-boxes', function (e) {
$(this).toggleClass('active');
}
Related
I have this piece of code:
function dropdown() {
let dropdownText = document.querySelector(".dropdown-button");
let item = document.querySelector(".dropdown-items").getElementsByTagName("div")[0];
var aux = dropdownText.innerHTML;
dropdownText.innerHTML = item.innerHTML;
item.innerHTML = aux;
document.querySelector(".dropdown-items").style.display = "none";
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
margin: 0 50px 0 50px;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown:hover .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn" onclick="dropdown();">Interrupt</div>
</div>
</div>
As you can see, I am trying to make a dropdown. I also want to make it so that when I click an option in the dropdown, the dropdown items stop showing as the option has been selected. That's why I added the line document.querySelector(".dropdown-items").style.display = "none"; in the JS file as I thought the .dropdown:hover .dropdown-items part of my CSS would change back the display of those elements to visible when hovering again, but when hovering again after the first click, the dropdown does not show anymore. Why is happening and how can I fix this?
Inline styles override any stylesheet styles, as they have maximum CSS specificity.
Instead of working with inline styles (el.style.display = "none"), work with a CSS class open that you toggle. Also don't make use of inline event listeners like onclick. Those are insecure and widely considered bad practice for a whole bunch of reasons. Use addEventListener instead.
// get all the dropdowns in a NodeList
const dropdowns = document.querySelectorAll('.dropdown');
// iterate over the list
for (const dropdown of dropdowns) {
// for each dropdown, add a mouseenter and mouseleave listener
dropdown.addEventListener('mouseenter', function(event) {
dropdown.classList.add('open');
});
dropdown.addEventListener('mouseleave', function(event) {
dropdown.classList.remove('open');
});
// Now add a click listener to each <div class="dropdown-items">
// that transfers the text and closes the dropdown
dropdown.querySelector('.dropdown-items').addEventListener(
'click',
function(event) {
this.previousElementSibling.textContent = this.textContent;
dropdown.classList.remove('open');
}
);
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown.open .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Interrupt</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Whatever</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Another one</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Here we go</div>
</div>
</div>
I am trying to use :hover in css to show/hide the display of one of my divs when I hover over another div, but for some reason it's not working. I got it to work on other components but for some reason it's not working for this instance. Can't figure out what I did wrong. please let me know what I'm doing wrong so I can fix my mistake
JSX
render() {
return (
<div className='row'>
<div className='container-job' onClick={this.test}>
<div className='row'>
<div className='job-title'>
{this.props.jobs_info.title}
</div>
</div>
<div className='row wrapper'>
<div className='category-title'>Category</div>
<div className='location-title'>Location</div>
<div className='type-title'>Type of Job</div>
<div className='creator-title'>Job Creator</div>
</div>
<div className='row wrapper'>
<div className='category'>
{this.props.jobs_info.job_team.title}
</div>
<div className='location'>
{this.props.jobs_info.job_location.title}
</div>
<div className='type'>
{this.props.jobs_info.job_work_type.title}
</div>
<div className='creator'>
{this.props.jobs_info.user.name}
</div>
</div>
</div>
<div
className='counter-container'
id='counter-container'
onMouseEnter={this.changeBackground}
onMouseLeave={this.changeBackground2}
>
Candidates <br />
{this.props.jobs_info.candidates_count}
</div>
<div className='delete-container-job center'>
<ion-icon id='trash' name='trash'></ion-icon>
</div>
</div>
);
}
CSS
.jobs-card {
height: 100%;
width: 100%;
.container-job {
position: relative;
height: 100px;
width: 860px;
background-color: rgb(37, 45, 73);
border-radius: 10px;
margin-left: 30px;
margin-bottom: 20px;
}
.container-job:hover {
.delete-container-job {
display: block !important;
}
}
.job-title {
position: relative;
color: white;
font-size: 16px;
margin-left: 40px;
margin-top: 15px;
margin-bottom: 10px;
}
.row .wrapper {
margin-left: 25px;
}
.counter-container {
position: relative;
background-color: rgb(37, 45, 73);
border-radius: 10px;
width: 110px;
height: 100px;
margin-left: 20px;
text-align: center;
color: white;
font-size: 15px;
padding-top: 30px;
}
.delete-container-job {
position: relative;
background-image: linear-gradient(to right, #4639a7, #78019c);
height: 100px;
width: 50px;
right: 180px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: none;
}
#trash {
font-size: 22px;
color: white;
display: inline-block;
margin-top: 40px;
}
.center {
text-align: center;
}
You need to use general sibling combinator to apply a style on .delete-container-job when .container-job is hovered on.
.container-job:hover ~ .delete-container-job {
display: block !important;
}
I'm trying to style a menu I built and I add a different class on each div element every time someone clicks on them. How can I remove the already added class from this element when I click anyone of the other 3 divs?
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
});
$('.garden-btn').click(function() {
$(this).addClass("active-btn-pink");
});
$('.technology-btn').click(function() {
$(this).addClass("active-btn-purple");
});
$('.auto-btn').click(function() {
$(this).addClass("active-btn-deep-purple");
});
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color: #555B66;
}
.active-btn-red {
background: #E53935;
color: #fff!important;
}
.active-btn-pink {
background: #D81B60;
color: #fff!important;
}
.active-btn-purple {
background: #8E24AA;
color: #fff!important;
}
.active-btn-deep-purple {
background: #5E35B1;
color: #fff!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn">FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
I know that i could do something like that for each one of them:
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
$('.garden-btn').removeClass("active-btn-pink");
$('.technology-btn').removeClass("active-btn-purple");
$('.auto-btn').removeClass("active-btn-deep-purple");
});
But as I will add more than 20 elements in my menu, I would like to ask if there any smarter/shorter way to make this work.
As #disinfor said in the comments, you could do something like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn" data-active-class ='active-btn-red '>FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color:#555B66;
}
.fashion-btn.active {
background:#E53935;color:#fff!important;
}
.garden-btn.active {
background:#D81B60;color:#fff!important;
}
.technology-btn.active {
background:#8E24AA;color:#fff!important;
}
.auto-btn.active {
background:#5E35B1;color:#fff!important;
}
$(".categories-sidebar-popup-menu-row" ).each(function (){
$(this).click(function(){
clearStyle();
$(this).addClass("active");
});
});
function clearStyle(){
buttonWithActive = $('.categories-sidebar-popup-menu-row.active');
buttonWithActive.removeClass('active');
}
JSFiddle
I nested 3 columns in the row div to align them horizontally and the social media icons will not be part of the row. I put width: 100%, float: left, and tried different ways to make the 3 columns lined up straight - no success.
This graphic below is the goal I need to succeed.
HTML and CSS
p {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 27px;
}
.box {
background-color: #f3f3f3;
color: #fff;
font-size: 150%;
width: 100%;
}
.box .box {
background-color: #f3f3f3;
color: #444;
}
.placeholder {
grid-column: col 3 / span 2;
grid-row: row 2;
display: grid;
}
.sm-stw {
grid-column: 1;
grid-row: 1;
width: 573px;
}
.stw-box {
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 0 auto;
}
div.vertical-line {
width: 1px;
background-color: #979797;
height: 100%;
float: left;
margin: 0 15px 0 15px;
}
.sm-svrs {
grid-column: 2;
grid-row: 1;
text-align: left;
}
.sm-hashtag-stw {
grid-column: 1/3;
grid-row: 2;
text-align: center;
}
<div class="box placeholder">
<div class="box sm-stw">
<div class="stw-box">
<div class="col">
<div class="sm-icon"><img src="imgs/icon-fb.png" alt="Seek the World | Facebook"></div>
<div class="sm-logo"><img src="imgs/icon-ins.png" alt="Seek the World | Instagram"></div>
</div>
<div class="col">
<div class="vertical-line" style="height: 75px;"></div>
</div>
<div class="col">
<h3>Seek the World</h3>
<p>(short content place here)</p>
</div>
</div>
</div>
</div>
I clean a little your css code, and i replace the grid with flex. Also there a lot of stuff that i think were useless, so i removed them.
As #hungerstar said in comment, you can set a border to one of the col, and add a little padding to make the vertical line.
It is better this way because it does not pollute the html.
Check the code, and tell me I you need more explanation !
$('#removeGrayMargin').on('click', function(){
if(!$(this).hasClass('active')) {
$(this).text('Put back gray margins');
$(this).addClass('active');
$('.main-container').addClass('with-margin');
}else {
$(this).text('Remove the gray margin');
$(this).removeClass('active');
$('.main-container').removeClass('with-margin');
}
});
.main-container {
background-color: #f3f3f3;
color: #444;
font-size: 150%;
width: 100%;
}
.box {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 30px 0;
}
.main-container.with-margin {
background: transparent;
}
.main-container.with-margin .box{
background: #f3f3f3;
}
.col-1 {
width: 30%;
text-align: right;
padding-right: 20px;
}
.col-2 {
width: 70%;
border-left: 1px solid #8C8C8C;
padding-left: 20px;
}
.col-2-title,
.col-2-p {
font-family: 'Source Sans Pro', sans-serif;
}
.col-2-p {
font-size: 14px;
margin-top: 0;
}
.col-2-title{
font-size: 27px;
margin-top: 5px;
margin-bottom: 20px;
}
.sm-logo + .sm-logo{
margin-top: 8px;
}
img {
/* Trick to remove the white space under the image */
vertical-align: middle;
}
button {
border-radius: 0;
background: #262626;
color: white;
border: 0;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="box">
<div class="col-1">
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-facebook.png" alt="Seek the World | Facebook" width="25px"></div>
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-instagram.png" alt="Seek the World | Instagram" width="25px"></div>
</div>
<div class="col-2">
<h3 class="col-2-title">Seek the World</h3>
<p class="col-2-p">(short content place here)</p>
</div>
</div>
</div>
<p>
Bonus because i don't know if you want exactly your image, or if you want the gray margin as your js fiddle.
</p>
<button id="removeGrayMargin">Remove the gray margin</button>
I have a series of cards in the same page. Below is the example the example below where I have put for this example only 1 card (but there are many more).
I fail to use jquery 'closest' or 'siblings' or something similar to do the following: when a user click on a card it collapses and the javascript kicks in to show the content. I need at that moment to replace the "plus icon" by a "minus icon". (only on this specific card so not using at any point a id or class containing the number of the card '354' in the example below)
Jsfiddle Demo
The Javascript should target the icon but it does not change it when I click
If you have trouble making appear the content, do not worry, it's not the focus of the question. I just want to know how to target the icon and change into to glyphicon minus.
HTML
<div id="operation-zone">
<ul class="cards-list">
<li class="card 354" data-opcode="CATIMINI26">
<div class="card-content" id="accordion_354">
<a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">
<i class="glyphicon glyphicon-plus detail-icon_354"></i>
</a>
<div class="card-image card-lazy-preloader" id="accordion2">
<a href="/campaigns/xxxxx">
</a><figure><a href="/campaigns/xxxxxx">
<!-- responsive image -->
<img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
</figure>
</div>
</div>
<div id="collapseOne_354" class="smux details details_354 panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">
<div id="DivHomeOperationDates" class="dates">
Jusqu'au <span class="brand-color">mercredi 06/04 6h</span>
</div>
<div id="DivHomeOperationDescription_52850" class="description">
operation in venicesqqsqssqsqsqsqsqsqss qui ravira les petits et les grands ! Retrouvez Les Schtroumpfs, Les Rebelles de la Foret, Hotel Transylvanie et bien d'autres encore...
</div>
<div class="card-info-actions">
<a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now ></a>
</div>
</div>
<!-- end of campaign card details on 1-column view-->
</li>
</ul>
</div>
Javascript
$('#collapseOne_354').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
});
$('#collapseOne_354').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
CSS
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
text-align: left;
width: 100%;
border-bottom: 1px solid black;
position: relative;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: green;
}
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-detail-opener {
color: green;
font-size: 16px;
text-align: center;
padding-left: 1px;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 27px;
background: grey;
position: absolute;
z-index: 2;
opacity: .75;
filter: alpha(opacity=75);
bottom: 60%;
right: 30%;
&:hover { background: #7E7E7E; }
&:focus { background: #7E7E7E; }
}
}
.card-detail-opener:link {
color: green;
}
.glyphicon.glyphicon-remove {
color: #333;
&:hover { color: green; }
&:focus { color: green; }
}
.glyphicon.glyphicon-plus {
top:1px;
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
.glyphicon.glyphicon-minus {
top:2px;
padding-right: 2px;//tweak to center
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
// Content of the card details in the 1-column view
.card .details {
padding-top: 10px;
background-color: rgba(255,255,255,1);
}
.details {
padding-left: 1em;
}
.details .dates {
padding-top: 10px;
font-size: .8em;
line-height: 1.6em;
color: #464650;
margin-right: 1em;
background-size: 90px auto !important;
background-repeat: no-repeat !important;
background-position-x: right !important;
background-position-y: 0px !important;
margin-bottom: 8px;
}
.details .baseline {
color: #888;
font-size: 0.75em;
line-height: 0.4em;
}
.details .description {
font-size: .65em;
color: #464650;
line-height: 1.1em;
overflow: hidden;
}
// End of content of the card details in the 1-column view
.card-info-actions {
float: right;
padding: 0 5px 2px 0;
clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
font-size: 15px;
}
.card-short-info a.dateSales {
color: #464650;
}
.info-overlay {
display:none;
z-index:999;
position:absolute;
height:100%;
width: 100%;
background-color: rgba(255,255,255,.9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
transition: all .4s ease-in-out;
border-bottom: 4px solid green;
}
.close-overlay {
float:right;
padding:5px;
}
.info-overlay a {
display: block;
line-height: normal;
text-decoration: none;
cursor: pointer;
}
The ID is wrong collapseOne_354 while you are binding collapseOne
EDIT
I would reach the glyphicon with
var list = $('.cards-list')
$('li', list).click(function(e){
var card=$(this);
$(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});