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 |
Table Sorter Data | 3,347 Kb |
3 Piece Slider | 3,881 Kb |
Parallax Cats | 6,553 Kb |
Expanding Info Boxes | 5,141 Kb |
3 Piece Slider with featured center | 3,920 Kb |
Simple Event Box | 1,623 Kb |
Bootstrap 4 | 2,121 Kb |
Simple React Template | 2,233 Kb |
Font-Awesome Icon Card with heading | 2,882 Kb |
Flexbox | 2,263 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 |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Search field | Jamesbarnett | 2,100 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Whyutils | LeYvan | 3,752 Kb |
Calculator | Rzencoder | 4,572 Kb |
Draggables in pure angular | Rlo206 | 5,167 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!