Expanding Info Boxes

Developer
Size
5,141 Kb
Views
28,336

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 Previews

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&hellip;</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&hellip;</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(); });
});
Expanding Info Boxes - Script Codes
Expanding Info Boxes - Script Codes
Home Page Home
Developer Jeanine
Username virtual
Uploaded September 12, 2022
Rating 3
Size 5,141 Kb
Views 28,336
Do you need developer help for Expanding Info Boxes?

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!

Jeanine (virtual) Script Codes
Create amazing sales emails with AI!

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!