Develop Reference

How to fix "Google signin" button style in HTML Page?

I have integrated the google signin button on my html page. but the sign in button doesn't fits into the exact space provided. How can i design custom button for google singin like the above given buttons like Facebook and twitter in the screen shot.
tried placing different button then google singin links doesn't works.
My html and CSS code:
<div class="container">
<form action="/action_page.php">
<div class="row">
<h2 style="text-align:center">Login with Social Media</h2>
<div class="col">
<a href="javascript:void(0);" onclick="fbLogin()" id="fbLink" class="fb btn" scope="public_profile,email" onlogin="checkLoginState();">
<i class="fa fa-facebook fa-fw"></i> Login with Facebook
</a>
<a href="javascript:void(0);" class="twitter btn">
<i class="fa fa-twitter fa-fw"></i> Login with Twitter
</a>
<a class="google btn">
<div class="g-signin2" data-width="570" data-height="30" data-longtitle="true"></div>
</a>
</div>
</div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>EMail Address</p>
<p id="email" class="alert alert-danger"></p>
<p id="name">
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
CSS:
* {box-sizing: border-box}
/* style the container */
.container {
position: relative;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px 0 30px 0;
}
/* style inputs and link buttons */
input,
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.85;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none; /* remove underline from anchors */
}
input:hover,
.btn:hover {
opacity: 1;
}
/* add appropriate colors to fb, twitter and google buttons */
.fb {
background-color: #3B5998;
color: white;
}
.twitter {
background-color: #55ACEE;
color: white;
}
.google {
background-color: #dd4b39;
color: white;
}
.data {
display: none;
}
/* style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* Two-column layout */
.col {
float: center;
width: 50%;
margin: auto;
padding: 0 0px;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* vertical line */
.vl {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 2px solid #ddd;
height: 175px;
}
/* text inside the vertical line */
.inner {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px 10px;
}
/* hide some text on medium and large screens */
.hide-md-lg {
display: none;
}
/* bottom container */
.bottom-container {
text-align: center;
background-color: #666;
border-radius: 0px 0px 4px 4px;
}
/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 650px) {
.col {
width: 100%;
margin-top: 0;
}
/* hide the vertical line */
.vl {
display: none;
}
/* show the hidden text on small screens */
.hide-md-lg {
display: block;
text-align: center;
}
}

Add text-align: center; to the div containing the google sign in button.

How to fix the a href tag clickable?

I have an html css code for notification dropdown box the issues is i can't able to click the tag and same time i tried with javaScript also not working i can't understand this issues please advice me how to make a clickable tag..
$('.toparea-right > .setting-area > li').on("click",function(){
$(this).siblings().children('div').removeClass('active');
$(this).children('div').addClass('active');
return false;
});
//------- remove class active on body
$("body *").not('.toparea-right > .setting-area > li').on("click", function() {
$(".toparea-right > .setting-area > li > div").removeClass('active');
return true;
});
.dropdowns {
background: #FFF none repeat scroll 0 0;
border: 1px solid #e1e8ed;
list-style: outside none none;
max-height: 294px;
overflow: auto;
padding-left: 0;
position: absolute;
right: -175px;
text-align: left;
top: 55px;
width: 440px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.dropdowns.active{
opacity: 1;
visibility: visible;
}
.drops-menu {
list-style: outside none none;
padding-left: 0;
}
.drops-menu > li > a {
border-bottom: 1px solid #e1e8ed;
display: inline-block;
padding: 5px;
width: 100%;
}
.dropdowns > h6{
font-size: 15px;
}
.drops-menu > li > .tag {
color: #fff;
display: inline-block;
font-size: 11px;
padding: 0 6px;
position: absolute;
right: 0;
top: 0;
}
.drops-menu > li:nth-child(2n) > a {
background: whitesmoke none repeat scroll 0 0;
}
.drops-menu > li a img {
display: inline-block;
vertical-align: middle;
width: 10%;
border-radius: 100%;
margin-bottom: 10px;
margin-left: 10px;
height: 45px;
}
.mesg-meta {
display: inline-block;
padding-left: 30px;
vertical-align: middle;
width: -1%;
color: #000000;
padding-top: -21px;
top: 18px;
margin-top: 0px;
line-height: 25px;
}
.mesg-meta > h6 {
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 0;
text-transform: capitalize;
margin-left: -15px;
}
.mesg-meta > span {
color: #000000;
display: inline-block;
font-size: 12px;
line-height: 15px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.mesg-meta > i {
color: #000000;
font-size: 12px;
font-style: normal;
margin-left: -15px;
}
.drops-menu > li > a:hover {
background: #fafafa none repeat scroll 0 0;
}
.dropdowns > span {
border-bottom: 1px solid #ccc;
display: inline-block;
font-size: 14px;
padding: 0px 10px;
text-align: center;
width: 100%;
height: 59px;
margin-top: 0px;
}
.dropdowns > a.more-mesg {
display: inline-block;
font-size: 14px;
padding-bottom: 5px;
text-align: center;
text-transform: capitalize;
width: 100%;
}
.blue{background: #337ab7;}
.red{background: #ff0000;}
.green{background: #33b7a0;}
.dropdowns.active > a {
background: #fafafa none repeat scroll 0 0;
display: block;
font-size: 13px;
margin-bottom: 2px;
padding: 0px 0px;
text-align: center;
}
.dropdowns.active > a i {
font-size: 11px;
left: 8px;
position: absolute;
top: 10px;
}
.dropdowns.languages {
width: 100px;
}
.dropdowns.active > a:hover {
background: #f1f1f1 none repeat scroll 0 0;
}
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
I attached my CSS and HTML code and i tried it's working but URL is opening in another tab. i need open the url in same tab please tell me the solution how to fix this.

In your code dropdown isn't ever made visible.
I think, you on click of "Notifications" you have to toggle(hide/show) dropdown by toggling(adding and removing) "active" class on Notifications tag.
Once your dropdown becomes visible. clicks should work as you desire.
Sample working code:
Notifications
<script>
function toggleDropdownVisibility(event) {
var notificationBell = event.target;
if (notificationBell.classList.contains('active')) {
notificationBell.classList.remove('active');
} else {
notificationBell.classList.add('active');
}
}
</script>
In addition to that please remove onclick="window.location.href('view-post.php')" as window.location.href is not a function instead it a property to which a url can be assigned. like window.location.href='view-post.php' . But you can completely remove this onclick as its not needed.

Your code looks fine here , except that I don't understand why you have opacity:0 and visibility:hidden on the .dropdown css class. These are making your control not accessible.
But once I remove these 2 properties in css worked for me (on last version of Chrome)
My advice:
For tags you can use this :
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/. No need too much custom JS.

I have the solution for this, i tried that and it's working.
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns" id="MmailNoti">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("MmailNoti");
popup.classList.toggle("show");
}
</script>

Second dropdown button in navigation bar showing the same content as the previous button?

My first dropdown button "Content" works correctly but when I click on the second dropdown button "Dropdown", the contents from the first dropdown button show up instead???
I have no idea why it is doing this??? Maybe I am overlooking a small detail, but I can't seem to find where I am going wrong with this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>

Ummm.... because you call the same function from both buttons.
Essentially, you run the same piece of code, myFunction, despite which navigation item is clicked. Therefore, of course both items will always do the same thing.
Give each menu a different ID (remember that IDs need to be unique - i.e. you can't have two items with the same ID), and make myFunction take the ID of the element to show / hide, as shown below.
This means that there is a way for the function to determine which menu open, and thus it will open the correct one.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onmouseup = function(e) {
var dropdown = document.querySelector(".dropdown-content.show"); //Get any shown dropdown element (i.e. any element on the page with both the dropdown-content class and the show class
if (dropdown) { //If such an element exists, a dropdown needs to be closed
dropdown.classList.remove("show"); //So remove the show class
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownOne')">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownOne">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownTwo')">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownTwo">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
How does this work?
myFunction('dropdownOne') means that the id variable in myFunction is given the value dropdownOne - therefore when we call document.getElementById(id) it will interpret as document.getElementById('dropdownOne') instead, and hence the first dropdown is targeted.
Likewise, if we call myFunction('dropdownTwo'), then it will interpret as document.getElementById('dropdownTwo'), and thus target the second dropdown.
Therefore, you can add as many menu items like this as you want, assuming each has a unique identifier, and myFunction is given the unique ID each time.

Javascript Replace innerhtml

I am having trouble replacing the html.
I want the whole "expand" div output to be replaced, as in the h3 and li texts will change according to which button the user presses.
As of now, the code does work to a point, the h3 changes, but rather than typing the actual text into my javascript, I want to be able to call the id and change it. Another problem is that pressing the prev button doesn't do anything yet. I also want the list of answers to change when clicking next.
Desired Outcome
when user clicks on next button, html is replaced with next question.
when user clicks on prev button, html is replaced with previous question.
function nextButton() {
var str = document.getElementById("expand").innerHTML;
var res = str.replace("which icon is used for GitHub?", "what is this?");
document.getElementById("expand").innerHTML = res;
}
var iconquiz = [
{
iq2: "<h3>what is this?</h3>",
ia2: "<li>this is something</li><li>this is something2</li>"
},
{
iq3: "<h3>what is next></h3>",
ia3: "<li>something</li><li>something else</li>"
}
];
/*************
MAIN STUFFF
*************/
body {
background: #CCC;
font-family: 'Varela Round', sans-serif;
}
.collapse {
color: #fff;
background: #494949;
border-radius: 10px;
width: 300px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
/*************
QUIZ BOXES
*************/
h2 {
text-align: center;
}
input {
display: none;
visibility: hidden;
}
label {
width: 90px;
margin: 0 auto;
margin-bottom: 10px;
display: block;
text-align: center;
color: #fff;
background-color: #4ada95;
border-radius: 5px;
}
label:hover {
color: #494949;
}
label::before {
}
/************
QUIZ CONTENT
************/
h3 {
background-color: #707070;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 0;
padding: 10px;
}
li {
list-style-type: none;
padding: 10px;
margin: 0 auto;
}
button {
color: #fff;
background-color: #707070;
border-radius: 5px;
border-style: solid;
border-color: #707070;
margin: 5px;
}
/***********
QUIZES
***********/
#expand {
height: 225px;
overflow: hidden;
transition: height 0.5s;
background-color: #4ada95;
color: #FFF;
width: 250px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
/**********
FIRST QUIZ
**********/
#toggle:checked ~ #expand {
height: 0px;
}
#toggle:checked ~ label::before {
display: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<div class="collapse">
<h2>Icon Quiz</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">take quiz</label>
<div id="expand">
<section>
<h3>which icon is used for GitHub?</h3>
<li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
<li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
</section>
<button type="button">prev</button><button onclick="nextButton()" type="button">next</button>
</div>
</div>

I haven't done all the cleanup here, but I think you'll get the idea from what's below. Note that I gave your <h3> element an ID so now you can just replace the raw text instead of trying to insert an HTML element into there. You'll have to work through how the answers are displayed, etc.
You'll also need to check the bounds of your array (list of questions) so your index doesn't go below zero or above the max index (length minus 1).
var index = 0;
function nextButton() {
index++;
document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
}
function prevButton() {
index--;
document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
}
var iconquiz = [
{
iq: "question number one",
ia: "<li>this is something</li><li>this is something2</li>"
},
{
iq: "question number two",
ia: "<li>something</li><li>something else</li>"
},
{
iq: "question number three",
ia: "<li>something</li><li>something else</li>"
}
];
/*************
MAIN STUFFF
*************/
body {
background: #CCC;
font-family: 'Varela Round', sans-serif;
}
.collapse {
color: #fff;
background: #494949;
border-radius: 10px;
width: 300px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
/*************
QUIZ BOXES
*************/
h2 {
text-align: center;
}
input {
display: none;
visibility: hidden;
}
label {
width: 90px;
margin: 0 auto;
margin-bottom: 10px;
display: block;
text-align: center;
color: #fff;
background-color: #4ada95;
border-radius: 5px;
}
label:hover {
color: #494949;
}
label::before {
}
/************
QUIZ CONTENT
************/
h3 {
background-color: #707070;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 0;
padding: 10px;
}
li {
list-style-type: none;
padding: 10px;
margin: 0 auto;
}
button {
color: #fff;
background-color: #707070;
border-radius: 5px;
border-style: solid;
border-color: #707070;
margin: 5px;
}
/***********
QUIZES
***********/
#expand {
height: 225px;
overflow: hidden;
transition: height 0.5s;
background-color: #4ada95;
color: #FFF;
width: 250px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
/**********
FIRST QUIZ
**********/
#toggle:checked ~ #expand {
height: 0px;
}
#toggle:checked ~ label::before {
display: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<div class="collapse">
<h2>Icon Quiz</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">take quiz</label>
<div id="expand">
<section>
<h3 id="questionHere">which icon is used for GitHub?</h3>
<li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
<li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
</section>
<button type="button" onclick="prevButton()">prev</button><button onclick="nextButton()" type="button">next</button>
</div>
</div>

Target closest icon to change it into another icon

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");
});