Expanding Info Boxes
How do I make an expanding info boxes?
When an image is clicked, it grows to fill the area and hides all other images. . What is a expanding info boxes? How do you make a expanding info boxes? This script and codes were developed by Jeanine on 12 September 2022, Monday.
Expanding Info Boxes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Info Boxes </title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css'>
<link rel='stylesheet prefetch' href='http://www.msm.edu/_resources-new/css/msm-styles.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"><div class="expanding-info-boxes show-all-boxes"> <div class="reset"><a title="Return to list">x</a></div> <ul class="clearfix"> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name1 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300a.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote> Monotonectally grow top-line ideas whereas economically sound paradigms. <b>Credibly grow</b> distinctive infomediaries without user-centric manufactured products. <a href="#" class="expand-readmore-more">More…</a> <span class="expand"><br/><br/> Monotonectally grow top-line ideas whereas economically sound paradigms. Credibly grow distinctive infomediaries without user-centric manufactured products. <a href="#" class="expand-readmore-less">Less</a></span> </blockquote> <p> <a href="#" class="reset">Read more bios</a></p> </div> </li> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name2 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300b.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote>Objectively provide access to plug-and-play human capital via 24/365 value. Seamlessly extend focused strategic theme areas whereas standards compliant internal or "organic" sources. Seamlessly customize performance based synergy for technically sound users. <span class="expand">Appropriately utilize go forward methodologies for principle-centered technology. Distinctively benchmark exceptional services after reliable technologies.
Completely iterate cross-unit products without high-payoff models. Globally myocardinate fully tested customer service whereas cooperative portals. Conveniently disseminate focused.</span></blockquote> </div> </li> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name3 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300c.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote>Monotonectally grow top-line ideas whereas economically sound paradigms. Credibly grow distinctive infomediaries without user-centric manufactured products. Efficiently.</blockquote> </div> </li> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name4 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300d.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote>Monotonectally grow top-line ideas whereas economically sound paradigms. Credibly grow distinctive infomediaries without user-centric manufactured products. Efficiently.</blockquote> </div> </li> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name2 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300b.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote>Monotonectally grow top-line ideas whereas economically sound paradigms. Credibly grow distinctive infomediaries without user-centric manufactured products. Efficiently.</blockquote> </div> </li> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name3 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300c.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote>Monotonectally grow top-line ideas whereas economically sound paradigms. Credibly grow distinctive infomediaries without user-centric manufactured products. Efficiently.</blockquote> </div> </li> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name4 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300d.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote>Monotonectally grow top-line ideas whereas economically sound paradigms. Credibly grow distinctive infomediaries without user-centric manufactured products. Efficiently.</blockquote> </div> </li> <li class="hiddenBox"> <div class="expanding-info-boxes-image"> <div class="hover-div"><a class="hover-tile" href="#"><h3>Name1 <small>Title</small> </h3></a> <a href="#"><img src="http://satinflame.com/clarion/images/stock/400-300a.jpg"/></a> </div> </div> <div class="expanding-info-boxes-content"> <blockquote>Monotonectally grow top-line ideas whereas economically sound paradigms. Credibly grow distinctive infomediaries without user-centric manufactured products. Efficiently.</blockquote> </div> </li> </ul> </div>
</div> <script src='https://code.jquery.com/jquery-2.1.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Expanding Info Boxes - Script Codes CSS Codes
@charset "UTF-8";
.wrapper { max-width: 1200px; margin: 0 auto;
}
.expanding-info-boxes { position: relative; width: 100%; display: block; border: 1px solid #ddd;
}
.expanding-info-boxes h3 { padding: 0; margin: 0; color: #13938e; font-size: 1.375rem; line-height: 1.5em;
}
.expanding-info-boxes h3 small { color: #333; display: block; clear: both; padding: 5px 0;
}
.expanding-info-boxes > ul { display: block; list-style: none; margin: 0;
}
.expanding-info-boxes li { width: 100%; float: left; padding: 10px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
@media (min-width: 768px) { .expanding-info-boxes .hover-div .hover-tile { width: 0; height: 0; opacity: 0; margin: 0; padding: 0; -webkit-transition: background-color .5s ease-in-out, opacity .5s ease-in-out; -moz-transition: background-color .5s ease-in-out, opacity .5s ease-in-out; -o-transition: background-color .5s ease-in-out, opacity .5s ease-in-out; transition: background-color .5s ease-in-out, opacity .5s ease-in-out; } .expanding-info-boxes .hover-div .hover-tile h3 { display: none; } .expanding-info-boxes .hover-div:hover .hover-tile { background: rgba(0, 0, 0, 0.8); vertical-align: middle; color: #fff; width: 100%; padding: 0; text-align: center; display: table-cell; position: absolute; top: -14px; left: 0; font-size: 18px; text-decoration: none; opacity: 1; } .expanding-info-boxes .hover-div:hover .hover-tile h3 { display: block; font-weight: 600; } .expanding-info-boxes .hover-div:hover .hover-tile h3 small { color: #ccc; font-size: .9rem; padding: 5px 0; } .expanding-info-boxes .hover-div { position: relative; overflow: hidden; } .expanding-info-boxes .hover-div small { display: block; clear: both; padding: 3px; } .expanding-info-boxes.active-single li.hiddenBox { width: 0; height: 0; opacity: 0; margin: 0; padding: 0; } .expanding-info-boxes div.reset { position: absolute; z-index: 10; display: none; right: 0; border: 1px solid #ccc; padding: 2px 10px; cursor: pointer; background: #333; color: #fff; } .expanding-info-boxes div.reset a { color: inherit; display: block; } .expanding-info-boxes a.reset { font-style: italic; } .expanding-info-boxes a.reset:after { content: ' >'; } .expanding-info-boxes .expanding-info-boxes-content { display: none; width: 75%; float: left; } .expanding-info-boxes.active-single div.reset { display: block; } .expanding-info-boxes.active-single .active { width: 100%; } .expanding-info-boxes.active-single .active .hover-tile { display: block; } .expanding-info-boxes.active-single .active .hover-div .hover-tile { display: none; } .expanding-info-boxes.active-single .active .expanding-info-boxes-content { display: block; padding: 15px 30px; } .expanding-info-boxes.active-single .active .expanding-info-boxes-image { width: 25%; float: left; } .expanding-info-boxes .hover-div:hover .hover-tile { padding: 35% 0 65% 0; } .expanding-info-boxes li { width: 25%; } .expand-readmore-less, .expand-readmore-more, .expand-readmore-hellip { display: none; } .expand-readmore { display: inline; }
}
/* end experts */
.expanding-info-boxes blockquote { color: #333; border-left: 0; margin-top: 10px; padding: 5px 0; quotes: "“" "”" "‘" "’";
}
.expanding-info-boxes blockquote:after,
.expanding-info-boxes blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;
}
.expanding-info-boxes blockquote:after { content: close-quote;
}
.expanding-info-boxes blockquote p { display: inline;
}
@media (max-width: 767px) { .expanding-info-boxes .expand { display: none; } .expanding-info-boxes-image .hover-tile { display: none; } .expanding-info-boxes-image, .expanding-info-boxes-content { width: 60%; float: left; } .expanding-info-boxes-image { padding: 0 15px 15px 0; width: 40%; } .reset { display: none; } .expand-readmore { display: none; }
}
Expanding Info Boxes - Script Codes JS Codes
$(function() { $('.expanding-info-boxes-content .expand').each(function() { $('<a href="#" class="expand-readmore-more">More…</a> ').insertBefore(this); $(this).append('<a href="#" class="expand-readmore-less">Less</a>'); }); $('.expanding-info-boxes li').each(function() { var currenttitle = $(this).find('.hover-tile'); var licontent = $(this).children('.expanding-info-boxes-content'); $(currenttitle).clone().prependTo(licontent); }); $('.expanding-info-boxes-image').on("click", function(event) { event.preventDefault(); $('.expanding-info-boxes li').addClass('hiddenBox').removeClass('active'); var currentli = $(this).parent('li'); currentli.removeClass('hiddenBox'); currentli.addClass('active'); $('.expanding-info-boxes').addClass('active-single').removeClass('show-all-boxes'); }); $('.reset').on("click", function(event) { event.preventDefault(); $('.expanding-info-boxes li').addClass('hiddenBox').removeClass('active'); $('.expanding-info-boxes').removeClass('active-single').addClass('show-all-boxes'); }); $('a.expand-readmore-more').click(function(event) { event.preventDefault(); $(this).hide(); $(this).closest('div').find('.expand').slideDown("fast"); }); $('a.expand-readmore-less').click(function(event) { event.preventDefault(); $(this).closest('div').find('.expand').slideUp("fast"); $(this).closest('div').find('.expand-readmore-more').show(); });
});
Developer | Jeanine |
Username | virtual |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 5,141 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Bootstrap 4 | 2,121 Kb |
Simple React Template | 2,233 Kb |
Table Sorter Data | 3,347 Kb |
Font-Awesome Icon Card with heading | 2,882 Kb |
Flexbox | 2,263 Kb |
3 Piece Slider with featured center | 3,920 Kb |
Parallax Cats | 6,553 Kb |
Simple Event Box | 1,623 Kb |
3 Piece Slider | 3,881 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!