what I try is to have a simple Accordion that changes it text before you open it, it displays show credits and when it's open the text should change to close credits does someone knows how to do it? saw it on some sites and I wonder how to do it in jquery
<!-- credits -->
<div class="credits">
<a class="show-credits" data-toggle="collapse" href="#credits" role="button"
aria-expanded="false" aria-controls="collapseExample">
Show Credits
</a>
<div class="collapse" id="credits">
<div class="card card-body">
<div class="credits-body">Credits text .....
</div>
</div>
</div>
</div>
<!-- /. credits -->
Thanks!
Here is an example of what you wish to do
https://codepen.io/wadleo/pen/mzMgpL
I used bootstrap and listen to its events on accordion open and close with jquery. Have fun.
https://codepen.io/wadleo/pen/mzMgpL
$(function() {
$("#paperback").on("hide.bs.collapse", function(){
$(".pp-but").html('Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>');
});
$("#paperback").on("show.bs.collapse", function(){
$(".pp-but").html('Paperback Open <span class="pull-right"><i class="fa fa-minus"></i></span>');
});
});
span, p {
line-height: 1.2;
font-family: Perpetua, sans-serif!important;
}
a {
color: black;
font-size: 15px;
font-family: Perpetua, sans-serif!important;
}
a:hover {
text-decoration: none;
}
.btn-theme {
padding: 10px 20px;
font-size: 15px;
background: white;
border-radius: 0px;
border: solid 2px #FF7F50;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
}
.btn-theme:hover {
background-color: #FF7F50;
color: white;
}
.book-adds {
margin-top: 5%;
}
.book-adds span {
width: 50%;
}
.book-adds-cont {
width: 200px;
height: 35px;
padding: 8px;
display: block;
border-radius: 5px;
margin-bottom: 5%;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<div class="col-xs-6 book-adds">
<span type="button" class="pp-but" data-toggle="collapse" data-target="#paperback">Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>
</span>
<br>
<span id="paperback" class="collapse">
<a class="btn btn-theme" href="">Buy</a>
</span>
<br>
</div>
You can use accordionbeforeactivate event as:
$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
//
} );
Below you can find a simple demo:
$(function(){
$( "#accordion" ).accordion();
$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
var oldHeaderText = ui.oldHeader.text()
var newHeaderText = ui.newHeader.text()
ui.oldHeader.text(oldHeaderText.replace(' - Open', ''));
ui.newHeader.text(newHeaderText + ' - Open');
} );
});
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Section 1 - Open</h3>
<div>
<p>
Paragraph 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Paragraph 2
</p>
</div>
</div>
</body>
</html>
Related
I'm building a website that allows a user to select one of the character. When the user clicks on 'Confirm', I want the page to be routed by showing the selected image and option to go back and select other characters. I want it to be shown as follows
But for some reason, the code shows up like this:
I don't see the 'Other' button, but it only comes out with a Confirm button. Not sure how to fix it..
Here is the code:
var elementSelected = null;
var typeSelected = false;
$(document).on('click', '.image > img', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
elementSelected = $(this);
typeSelected = false;
});
$(document).on('input', '#text-src', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
elementSelected = $(this);
typeSelected = true;
})
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
})
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
#dog {
width: 70%;
height: 70%;
}
#mother {
width: 70%;
height: 70%;
}
#soldier {
width: 70%;
height: 70%;
margin-top: 50%
}
#teacher {
width: 70%;
height: 70%;
margin-top: 50%;
}
.button {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 60%;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
text-align: center;
cursor: pointer;
border-radius: 2px;
}
.button:hover {
background-color: #242424;
}
.button:active {
background-color: #121212;
}
.button>span {
color: #eeeeee
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="./images/Hamburger_icon.svg" alt="Hamburger Menu" />
</a>
<a href="styles/Jason/settings.html">
<ul class="navbar-nav">
<img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="50vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<img src="images/dog.png" id="dog" alt="dog">
<img src="images/mother.png" id="mother" alt="mother">
<img src="images/military.png" id="soldier" alt="soldier">
<img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="50vh" />
</div>
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="50vh" />
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="50vh" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
I am not a html/css expert, however I can see in chrome dev tools that the 'Other' button is certainly there (and the script is working as expected) however it is hidden behind the fixed footer. A quick google on 'bootstrap fixed footer body' found this answer -
Flushing footer to bottom of the page, twitter bootstrap
and I indeed got your snippet working (i.e. the 'Other' button showing) by adding the following styles to your css -
body {
padding-bottom:150px;
}
fixed-bottom {
margin-top:-150px;
}
with regards to the confirm button still showing, you can modify the script as following to show/hide the confirm button accordingly -
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
$('#button-confirm').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
$('#button-confirm').show();
})
I have been so far able to achieve how a normal promo box should look like. So when you click on the text the onclick function will trigger and open the input field and "apply" button, and everything is working order.
What I want to achieve is a validation on the input field that if the field is empty and someone is trying to click on "Apply" button. It should give an error message saying "You must enter discount code"
Can someone help me?
$("#promo-code").on("click", function() {
$("#promo-code").hide();
$("#promo-box").show();
$("#codediv").show();
$('.trash-checkout').hide();
});
$('#applybtn').click(function() {
$("#promo-box").hide();
$("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show();
$('.trash-checkout').show();
});
$('#removecode').click(function() {
$(".checkout-promo-code-input").val('');
$("#codediv").html("").hide();
$('.trash-checkout').hide();
$("#promo-code").show();
});
$('#promo-code-outer').on("click", '#edit-promo-code', function() {
$("#codediv").hide();
$('.trash-checkout').hide();
$("#promo-box").show();
});
.trash-checkout {
color: rgba(0, 0, 0, .7);
cursor: pointer;
font-size: 15px;
}
.trash-checkout:hover {
color: #dc3545;
}
.promo-edit {
font-weight: 600;
color: rgba(0, 0, 0, .7);
font-size: 15px;
}
.promo-edit a {
color: #000000;
}
#promo-code {
text-align: center;
font-size: 15px;
}
#promo-box,
#promo-box-mb {
display: none;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="promo-code-outer">
<div class="mt-3 text-center">Apply a promo code</div>
<div id="promo-box">
<span class="col-9 float-left pl-0 pr-0"><input type="text" class="checkout-promo-code-input" placeholder="Enter promo code"></span>
<span class="col-3 float-left"><button class="btn btn-primary" id="applybtn">Apply</button></span>
</div>
<div class="float-left promo-edit display-none" id="codediv"></div>
<div class="float-right" style="margin-left:50px;">
<span class="trash-checkout" style="display: none;"><i class="far fa-trash-alt" id="removecode"></i></span>
</div>
</div>
just check the value of the input.
$('#applybtn').click(function() {
if ($("#promo-box input").val()){
$("#promo-box").hide();
$("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show();
$('.trash-checkout').show();
}
else{
// do your error stuff
}
});
$("#promo-code").on("click", function() {
$("#promo-code").hide();
$("#promo-box").show();
$("#codediv").show();
$('.trash-checkout').hide();
});
$('#applybtn').click(function() {
if ($("#promo-box input").val()){
$("#promo-box").hide();
$("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show();
$('.trash-checkout').show();
}
else{
$("#promo-box input").css("border-color", "red");
$( "#promo-box" ).append( "<p style='color: red;'>promo code is required</p>" );
}
});
$('#removecode').click(function() {
$(".checkout-promo-code-input").val('');
$("#codediv").html("").hide();
$('.trash-checkout').hide();
$("#promo-code").show();
});
$('#promo-code-outer').on("click", '#edit-promo-code', function() {
$("#codediv").hide();
$('.trash-checkout').hide();
$("#promo-box").show();
});
.trash-checkout {
color: rgba(0, 0, 0, .7);
cursor: pointer;
font-size: 15px;
}
.trash-checkout:hover {
color: #dc3545;
}
.promo-edit {
font-weight: 600;
color: rgba(0, 0, 0, .7);
font-size: 15px;
}
.promo-edit a {
color: #000000;
}
#promo-code {
text-align: center;
font-size: 15px;
}
#promo-box,
#promo-box-mb {
display: none;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="promo-code-outer">
<div class="mt-3 text-center">Apply a promo code</div>
<div id="promo-box">
<span class="col-9 float-left pl-0 pr-0"><input type="text" class="checkout-promo-code-input" placeholder="Enter promo code"></span>
<span class="col-3 float-left"><button class="btn btn-primary" id="applybtn">Apply</button></span>
</div>
<div class="float-left promo-edit display-none" id="codediv"></div>
<div class="float-right" style="margin-left:50px;">
<span class="trash-checkout" style="display: none;"><i class="far fa-trash-alt" id="removecode"></i></span>
</div>
</div>
Just started coding everything from scratch ad hit a bit of a road block.
Struggling to get the glyphicons aligned to the top of the div on the left hand side and cant figure out where I am going wrong.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>B01 Media- Admin Panel</title>
<!-- Bootstrap -->
<link href="../css/animate.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/magnific-popup.css" rel="stylesheet" />
<link href="../css/owl.carousel.css" rel="stylesheet" />
<link href="../css/owl.theme.css" rel="stylesheet" />
<link href="../css/preload.css" rel="stylesheet" />
<link href="../css/responsive.css" rel="stylesheet" />
<link href="../css/YTPlayer.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="admin.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation Area</h1>
<ul>
<li class="link">
<a href="Index.html">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span>Dashboard</span>
</a>
</li>
<li class="link">
<a hef="#collapse-post" data-toggle="collapse" aria-controls="collapse-post">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
<span>Articles</span>
<span class="label label-sucess pull-right">20</span>
</a>
<ul class="collapse collapsable" id="collapse-post">
<li>Create New</li>
<li>View Articles</li>
</ul>
</li>
<li class="link">
<a hef="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span>Comments</span>
</a>
<ul class="collapse collapsable" id="collapse-comments">
<li>
<a href="Approved.html">Approved
<span class="label label-success pull-right">10</span>
</a>
</li>
<li>
<a href="Unapproved.html">Unapproved
<span class="label label-warning pull-right">10</span>
</a>
</li>
</ul>
</li>
<li class="link">
<a href="commenters.html">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span>Comments</span>
</a>
</li>
<li class="link">
<a href="tags.html">
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
<span>Tags</span>
</a>
</li>
<li class="link">
<a href="Settings.html">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<span>Settings</span>
</a>
</li>
</ul>
</div>
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header id="nav-header" class="clearfix">
<div class="col-md-5">
<input type="text" id="header-search-field" placeholder="Search for anything" />
</div>
<div class="col-md-7">
<ul class="pull-right">
<li class="welcome">Welcome to your administration area</li>
<li class="fixed-width">
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label label-warning">3</span>
</a>
</li>
<li class="fixed-width">
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label label-message">3</span>
</a>
</li>
<li>
<a href="#" class="logout">
<span class="glyphicon glyphicon-logout" aria-hidden="true"></span>
logout
</a>
</li>
</ul>
</div>
</header>
</div>
<div class=row>
<footer id="admin-footer" class="clearfix">
<div class="pull -left"> Copyright 2017</div>
<div class="pull-right"> B01 Media- Blog Admin Panel</div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</html>
CSS
html, body {
font-family: "open sans", "helvetica neue",Arial, Helvetica, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 3px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
height: 100%;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
#nav-header {
background-color: #fff;
border-bottom: 1px solid #e7eaec;
}
#nav-header #header-search-field {
padding-top: 17px;
vertical-align: central;
border: none;
width: 300px;
outline: none;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: left;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul glyphicon {
color: #676a6c;
}
.label-message {
background-color: #1ab394;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
#nav-header ul .label {
position: absolute;
margin-top: -10px;
margin-left: -5px;
}
#nav-header .fixed-width {
width: 35px;
}
#admin-footer {
position: absolute;
width: 100px;
bottom: 0px;
background-color: #fff;
padding: 10px;
font-size: 12px;
color: #676a6c;
}
Help much appreciated.
Try taking height: 100%; off of #side-menu h1. This will put your glyphicons inside the navigation area box instead of below it
#side-menu h1 {
height: auto;
}
I am new to HTML, CSS, and Jquery.
I created the following code for a Material Design Lite (MDL) "card."
Problems: The card will currently resize, but only the space above the title and I need the supporting text section to expand. I also need the supporting text section to expand dynamically only far enough to show all of its' text on the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.article_card {
width: 95%;
height: 200px;
background-color: white;
text-align: left;
scroll-behavior: smooth
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
height: 70px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".article_card").click(function() {
var newHeight = 900
if ($(".article_card").height() != 200)
$(".article_card").animate({
height: 400
}, 500);
else
$(".article_card").animate({
height: newHeight
}, 500);
});
</script>
</body>
</html>
Instead of altering the height of the entire .article_card, animate the height of the .mdl-card__supporting-text element. This will cause the entire .article_card to expand in height to show the contents of .mdl-card__supporting-text.
Since we want to animate the height to fit the dynamic content, we'll use max-height instead of height in order for the animation to work.
$(".article_card").click(function() {
if ($(this).height() > 220 ) {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '75px'
}, 500);
} else {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '1000px'
}, 500);
}
});
.article_card {
width: 95%;
background-color: white;
text-align: left;
scroll-behavior: smooth;
padding-top: 0px;
position: relative;
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
max-height: 75px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>
I'm trying to show a bootstrap glyphicon on the rigth side on my link when I am hovering it.
I've tried using both CSS an JS but it just wont work. So i need som help :)
This is what I am trying to do: When i hoover Foo, I want the pencil icon to show. And so on. The same is going to happen when i hoover 'Bar' and 'This is a link' also
I also want it to be a button.
This is how the html looks like:
<div class="nesting">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <div class="pull-right"><span class="glyphicon glyphicon-pencil" area-hidden="true"></div>
<div class="nesting_child">
<span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar
<span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link
Thank you for your help :)
Answer updated:
check this fiddle, hope this is exactly what you are looking for,
//html
<div class="nesting">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span>
<div class="nestchild">
<span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span>
</div>
</div>
//javascript
$(document).ready(function(){
$('.nesting a').hover(function(){
$(this).children('span.pencil').css({'display' : 'inline-block'});
},function(){
$(this).children('span.pencil').css({'display' : 'none'});
});
});
//css
.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }
Add a "hidden" class and an id to your pencil div and an id to you "Foo" anchor:
<a href="#" class="nesting-item" id="foo">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo
<div id="pencil-glyph" class="pull-right hidden">
<span class="glyphicon glyphicon-pencil" area-hidden="true"></span>
</div>
</a>
CSS:
.hidden { display: none; }
Then add an hover event listener to your anchor (e.g. using jQuery) which adds/removes the hidden class (https://api.jquery.com/hover/):
$('#foo').hover(function () {
$('#pencil-glyph').removeClass('hidden');
}, function () {
$('#pencil-glyph').addClass('hidden');
});
You can use the background-color of the div as glyphicon's color and on hovering the div/glyphicon you can enable the glyphicon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
button{
font-size: 30px;
background: white;
border: 2px solid blue;
margin-top: 10px;
border-radius: 2px;
box-sizing: border-box;
color: blue;
cursor: pointer;
padding: 10px 24px;
transition: box-shadow 200ms;
}
button:hover{
font-size: 30px;
background:blue;
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
padding: 10px 24px;
transition: box-shadow 200ms;
}
span{
color:white;
}
span:hover {
}
</style>
<body>
<div class="container">
<button type="button">
text<span class="glyphicon glyphicon-ok" ></span>
</button>
<button type="button">
text1<span class="glyphicon glyphicon-ok" ></span>
</button>
<button type="button">
text2<span class="glyphicon glyphicon-ok" ></span>
</button>
</div>
</body>
</html>