Related
I'm trying to build a simple slider. You click left, the images slide left. You click right, the images slide right.
I have done that. It works great, with one small problem. It is hard to describe the problem so I will give you a fiddle instead. I would print all the code here but it is too much.
$(function () {
$("#oe-slide-left").on('click', function () {
SlideLeft();
});
$("#oe-slide-right").on('click', function () {
SlideRight();
});
});
function SlideLeft() {
var countLeft = $('#oe-testemonials').find('.oe-testemonial:visible').each(function () { }).length;
var countRight = $('#oe-testemonials').find('.oe-testemonial:hidden').each(function () { }).length;
if (countLeft > 3) {
$("#oe-testemonials div.oe-testemonial:visible").first().animate({ width: 'toggle' }, 350);
}
if (countLeft === 4) {
$("#oe-slide-left").hide();
}
if (countRight === 0) {
$("#oe-slide-right").show();
}
}
function SlideRight() {
var countLeft = $('#oe-testemonials').find('.oe-testemonial:visible').each(function () { }).length;
var countRight = $('#oe-testemonials').find('.oe-testemonial:hidden').each(function () { }).length;
if (countRight > 0) {
$("#oe-testemonials div.oe-testemonial:hidden").last().animate({ width: 'toggle' }, 350);
}
if (countRight <= 1) {
$("#oe-slide-right").hide();
}
if (countLeft === 3)
{
$("#oe-slide-left").show();
}
}
.oe-testemonials {
margin-top: 40px;
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
.slider-left-arrow, .slider-right-arrow {
position: absolute;
z-index: 1000;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
&:hover {
background: #efe5e5;
opacity: 0.8;
}
}
.slider-left-arrow {
left: 15px;
}
.slider-right-arrow {
right: 15px;
}
.oe-testemonial {
width: 33%;
display: inline-block;
margin: auto;
white-space: normal;
.image-wrapper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
margin: auto;
img {
display: inline;
margin: 0 auto;
height: 100%;
width: auto;
}
}
.description, .name, .title, .location {
width: 90%;
max-width: 300px;
text-align: center;
margin: auto;
}
.description {
border-bottom: 1px solid #999;
padding-bottom: 5px;
margin-bottom: 5px;
color: #413880;
}
.name {
font-family: 'Just Another Hand', cursive;
font-size: 24px;
}
.location {
color: #B3B3B3;
}
}
}
.description{
width: 100px !important;
}
<div id="oe-testemonials" class="oe-testemonials">
<img id="oe-slide-left" src="/Images/left_arrow.png" alt="Click To Slide Left" class="slider-left-arrow">
<img id="oe-slide-right" src="/Images/right_arrow.png" alt="Click To Slide Right" class="slider-right-arrow" style="display: none;">
<div class="oe-testemonial" style="display: inline-block;"><div class="image-wrapper"><img src="/Images/people/Erin_Hartigan-6947_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>I think that OrthoEvidence is wonderful. It’s great that there are new avenues for people to learn about the evidence and have it summarized, which allows for a more transparent transfer of research to both practitioners and patients.</span></div><div class="name"><span>Dr. Erin Hartigan</span></div><div class="title"><span>Assistant Professor of Physical Therapy</span></div><div class="location"><span>University of New England</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/HiteshGopalan.jpg" alt="Portfolio Image"></div><div class="description"><span>As an Editor of a book and an associated website, I have been following 20- 30 journals every month. But now I have shifted my primary focus to OrthoEvidence where I get all quality information in one place.</span></div><div class="name"><span>Dr. Hitesh Gopalan</span></div><div class="title"><span>Editor</span></div><div class="location"><span>orthopaedicprinciples.com</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/DavidGryfe_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence raises the bar on timely and relevant reviews of the medical literature. This is an indispensible service for every practitioner who strives to stay current.</span></div><div class="name"><span>Dr. David Gryfe</span></div><div class="title"><span>Chiropractor</span></div><div class="location"><span>Chiropractic Sports Specialist</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/AaronKrych_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence allows the busy practicing surgeon, in a short period of time, to stay up to date with what is important with the changes in the literature.</span></div><div class="name"><span>Dr. Aaron Krych</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Mayo Clinic</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/JonathanRonquillo_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence has made me more critical of available papers. It has made me look back at certain existing protocols...to improve existing practice.</span></div><div class="name"><span>Dr. Jonathan Ronquillo</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Asian Hospital and Medical Center</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/FrankSmith_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OrthoEvidence is the flag ship for enabling us to keep current whilst still working 60 hour weeks.</span></div><div class="name"><span>Dr. Frank Smith</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>McMaster University</span></div></div><div class="oe-testemonial"><div class="image-wrapper"><img src="/Images/people/MarcosBritto_sm.jpg" alt="Portfolio Image"></div><div class="description"><span>OE is medical information of unparalleled quality, with papers revised, and a newsletter available in my inbox. It is the fastest and easiest way to stay updated on Orthopedics.</span></div><div class="name"><span>Dr. Marcos Britto da Silva</span></div><div class="title"><span>Orthopaedic Surgeon</span></div><div class="location"><span>Federal University of Rio de Janeiro</span></div></div></div>
Please take a look at this: https://jsfiddle.net/wq96vbd5/
You will notice that when you click on "Click To Slide Left" the slider does slide left but the text gets super long and the animation just looks terrible.
The best and easiest way to do this, is with a plugin, I recommend the slick slider, because it's free, easy to learn and have a big community
To do that you'll need jquery, download the js and the css file from the slick page, and start using
Here is your example with the plugin in jsfiddle
HTML
<div id="oe-testemonials" class="oe-testemonials">
<div id="oe-slide">
<div class="oe-testemonial" style="display: inline-block;">
<div class="image-wrapper"><img src="/Images/people/Erin_Hartigan-6947_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>I think that OrthoEvidence is wonderful. It’s great that there are new avenues for people to learn about the evidence and have it summarized, which allows for a more transparent transfer of research to both practitioners and patients.</span></div>
<div class="name"><span>Dr. Erin Hartigan</span></div>
<div class="title"><span>Assistant Professor of Physical Therapy</span></div>
<div class="location"><span>University of New England</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/HiteshGopalan.jpg" alt="Portfolio Image"></div>
<div class="description"><span>As an Editor of a book and an associated website, I have been following 20- 30 journals every month. But now I have shifted my primary focus to OrthoEvidence where I get all quality information in one place.</span></div>
<div class="name"><span>Dr. Hitesh Gopalan</span></div>
<div class="title"><span>Editor</span></div>
<div class="location"><span>orthopaedicprinciples.com</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/DavidGryfe_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence raises the bar on timely and relevant reviews of the medical literature. This is an indispensible service for every practitioner who strives to stay current.</span></div>
<div class="name"><span>Dr. David Gryfe</span></div>
<div class="title"><span>Chiropractor</span></div>
<div class="location"><span>Chiropractic Sports Specialist</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/AaronKrych_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence allows the busy practicing surgeon, in a short period of time, to stay up to date with what is important with the changes in the literature.</span></div>
<div class="name"><span>Dr. Aaron Krych</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>Mayo Clinic</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/JonathanRonquillo_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence has made me more critical of available papers. It has made me look back at certain existing protocols...to improve existing practice.</span></div>
<div class="name"><span>Dr. Jonathan Ronquillo</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>Asian Hospital and Medical Center</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/FrankSmith_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OrthoEvidence is the flag ship for enabling us to keep current whilst still working 60 hour weeks.</span></div>
<div class="name"><span>Dr. Frank Smith</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>McMaster University</span></div>
</div>
<div class="oe-testemonial">
<div class="image-wrapper"><img src="/Images/people/MarcosBritto_sm.jpg" alt="Portfolio Image"></div>
<div class="description"><span>OE is medical information of unparalleled quality, with papers revised, and a newsletter available in my inbox. It is the fastest and easiest way to stay updated on Orthopedics.</span></div>
<div class="name"><span>Dr. Marcos Britto da Silva</span></div>
<div class="title"><span>Orthopaedic Surgeon</span></div>
<div class="location"><span>Federal University of Rio de Janeiro</span></div>
</div>
</div>
</div>
Javascript
$(document).ready(function(){
$('#oe-slide').slick({
slidesToShow: 3,
prevArrow: "<img id='oe-slide-left' src='/Images/left_arrow.png' alt='Click To Slide Left' class='slider-left-arrow'>",
nextArrow: "<img id='oe-slide-right' src='/Images/right_arrow.png' alt='Click To Slide Right' class='slider-right-arrow' style='display: none'>"
});
});
CSS
The same
I have created a list on my site. This list is created by a foreach loop that builds with information from my database. Each item is a container with different sections, so this is not a list like 1, 2, 3... etc. I am listing repeating sections with information. In each section, there is a subsection. The general build is as follows:
<div>
<fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
<legend class="majorpointslegend">Expand</legend>
<div style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"
The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.
The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.
Here is the javascript:
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
document.write.$(this).find('div').style = "display:inherit";
document.write.$(this).find('legend').innerHTML = "Collapse";
}
else
{
document.write.$(this).find('div').style = "display:none";
document.write.$(this).find('legend').innerHTML = "Expand";
}
}
I am almost 100% sure my problem is syntax, and I don't have much of a grasp on how javascript works.
I do have jQuery linked to the document with:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
In the <head></head> section.
Okay, so you've got two options here :
Use jQuery UI's accordion - its nice, easy and fast. See more info here
Or, if you still wanna do this by yourself, you could remove the fieldset (its not semantically right to use it for this anyway) and create a structure by yourself.
Here's how you do that. Create a HTML structure like this :
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
With this CSS: (This is to hide the .content stuff when the page loads.
.container .content {
display: none;
padding : 5px;
}
Then, using jQuery, write a click event for the header.
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Here's a demo : http://jsfiddle.net/hungerpain/eK8X5/7/
how about:
jQuery:
$('.majorpoints').click(function(){
$(this).find('.hider').toggle();
});
HTML
<div>
<fieldset class="majorpoints">
<legend class="majorpointslegend">Expand</legend>
<div class="hider" style="display:none" >
<ul>
<li>cccc</li>
<li></li>
</ul>
</div>
</div>
Fiddle
This way you are binding the click event to the .majorpoints class an you don't have to write it in the HTML each time.
You might want to give a look at this simple Javascript method to be invoked when clicking on a link to make a panel/div expande or collapse.
<script language="javascript">
function toggle(elementId) {
var ele = document.getElementById(elementId);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
You can pass the div ID and it will toggle between display 'none' or 'block'.
Original source on snip2code - How to collapse a div in html
So, first of all, your Javascript isn't even using jQuery. There are a couple ways to do this. For example:
First way, using the jQuery toggle method:
<div class="expandContent">
Click Here to Display More Content
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').toggle();
});
</script>
jsFiddle: http://jsfiddle.net/pM3DF/
Another way is simply to use the jQuery show method:
<div class="expandContent">
Click Here to Display More Content
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').show();
});
</script>
jsFiddle: http://jsfiddle.net/Q2wfM/
Yet a third way is to use the slideToggle method of jQuery which allows for some effects. Such as $('#showMe').slideToggle('slow'); which will slowly display the hidden div.
Many problems here
I've set up a fiddle that works for you: http://jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){
if($(this).text()=='Expand'){
$('#mylist').show();
$(this).text('Colapse');
}else{
$('#mylist').hide();
$(this).text('Expand');
}
});
try jquery,
<div>
<a href="#" class="majorpoints" onclick="majorpointsexpand(" + $('.majorpointslegend').html() + ")"/>
<legend class="majorpointslegend">Expand</legend>
<div id="data" style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
$('#data').css("display","inherit");
$(".majorpointslegend").html("Collapse");
}
else
{
$('#data').css("display","none");
$(".majorpointslegend").html("Expand");
}
}
Here there is my example of animation a staff list with expand a description.
<html>
<head>
<style>
.staff { margin:10px 0;}
.staff-block{ float: left; width:48%; padding-left: 10px; padding-bottom: 10px;}
.staff-title{ font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white; padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-weight: bold;}
.staff-name { font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;}
.staff-name:hover { background-color: silver !important; cursor: pointer;}
.staff-section { display:inline-block; padding-left: 10px;}
.staff-desc { font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}
.staff-desc p { text-align: justify; margin-top: 5px;}
.staff-desc img { margin: 5px 10px 5px 5px; float:left; height: 185px; }
</style>
</head>
<body>
<!-- START STAFF SECTION -->
<div class="staff">
<div class="staff-block">
<div class="staff-title">Staff</div>
<div class="staff-section">
<div class="staff-name">Maria Beavis</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p>
</div>
<div class="staff-name">Diana Smitt</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p>
</div>
<div class="staff-name">Mike Ford</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p>
</div>
</div>
</div>
<div class="staff-block">
<div class="staff-title">Technical Advisors</div>
<div class="staff-section">
<div class="staff-name">TA Elvira Bett</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client portfolios, maintaining investment objectives, and executing client trades.</p>
</div>
<div class="staff-name">TA Sonya Rosman</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute. She recently completed her Wealth Management Essentials course and became an Investment Associate.</p>
</div>
<div class="staff-name">TA Tim Herson</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Tim joined his father’s group in order to continue advising affluent families in Quebec. He is currently President of the Mike Ford Professionals Association and a member of various other organisations.</p>
</div>
</div>
</div>
</div>
<!-- STOP STAFF SECTION -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript"><!--
//<![CDATA[
$('.staff-name').hover(function() {
$(this).toggleClass('hover');
});
var lastItem;
$('.staff-name').click(function(currentItem) {
var currentItem = $(this);
if ($(this).next().height() == 0) {
$(lastItem).css({'font-weight':'normal'});
$(lastItem).next().animate({height: '0px'},400,'swing');
$(this).css({'font-weight':'bold'});
$(this).next().animate({height: '300px',opacity: 1},400,'swing');
} else {
$(this).css({'font-weight':'normal'});
$(this).next().animate({height: '0px',opacity: 1},400,'swing');
}
lastItem = $(this);
});
//]]>
--></script>
</body></html>
Fiddle
Take a look at toggle() jQuery function :
http://api.jquery.com/toggle/
Also, innerHTML jQuery Function is .html().
Since you have jQuery on the page, you can remove that onclick attribute and the majorpointsexpand function. Add the following script to the bottom of you page or, preferably, to an external .js file:
$(function(){
$('.majorpointslegend').click(function(){
$(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
This solutionshould work with your HTML as is but it isn't really a very robust answer. If you change your fieldset layout, it could break it. I'd suggest that you put a class attribute in that hidden div, like class="majorpointsdetail" and use this code instead:
$(function(){
$('.majorpoints').on('click', '.majorpointslegend', function(event){
$(event.currentTarget).find('.majorpointsdetail').toggle();
$(this).text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Obs: there's no closing </fieldset> tag in your question so I'm assuming the hidden div is inside the fieldset.
If you used the data-role collapsible e.g.
<div id="selector" data-role="collapsible" data-collapsed="true">
html......
</div>
then it will close the the expanded div
$("#selector").collapsible().collapsible("collapse");
Pure javascript allowing only one expanded div at a time. It allows multi-level sub-expanders. The html only need the expanders contents. The javascript will create the expanders headers with the titles form the content data attribute and a svg arrow.
<style>
/* expanders headers divs */
.expanderHead {
color: white;
background-color: #1E9D8B;
border: 2px solid #1E9D8B;
margin-top: 9px;
border-radius: 6px;
padding: 3px;
padding-left: 9px;
cursor: default;
font-family: Verdana;
font-size: 14px;
}
.expanderHead:first-child {
margin-top: 0 !important;
}
.expanderBody:last-child {
margin-bottom: 0 !important;
}
/* expanders svg arrows */
.expanderHead svg > g > path {
fill: none;
stroke: white;
stroke-width: 2;
stroke-miterlimit: 5;
pointer-events: stroke;
}
/* expanders contents divs */
.expanderBody {
border: 2px solid #1E9D8B;
border-top: 0;
background-color: white;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
padding: 6px;
font-family: Verdana;
font-size: 12px;
}
/* widget window */
.widget {
width: 400px;
background-color: white;
padding: 9px;
border: 2px solid #1E9D8B;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<div class="widget">
<div data-title="expander 1" class="expanderBody">
expander 1 content
</div>
<div data-title="expander 2" class="expanderBody">
expander 2 content
</div>
<div data-title="expander 3" class="expanderBody">
<div>
expander 3 content
</div>
<div data-title="expander 3.1" class="expanderBody">
expander 3.1 content
</div>
<div data-title="expander 3.2" class="expanderBody">
expander 3.2 content
</div>
<div data-title="expander 3.3" class="expanderBody">
expander 3.3 content
</div>
</div>
</div>
<script>
document.querySelectorAll(".expanderBody").forEach(item => {
if (item.dataset.title) {
// create expander header
let divHeader = document.createElement("div");
divHeader.className = "expanderHead";
divHeader.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 5 5 L 10 1'/><path d='M 1 1 L 5 5'/></g></svg> <span>" + item.dataset.title + "</span>";
// expander click event
divHeader.addEventListener("click", function () {
// open / close expander
for (let i = 0; i < this.parentNode.children.length; i++) {
let expander = this.parentNode.children[i];
// check if it's expander header
if (expander.className == "expanderHead") {
if (expander == this && expander.nextElementSibling.style.display == "none") {
// open expander body
expander.nextElementSibling.style.display = "";
expander.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 1 5 L 5 1'/><path d='M 5 1 L 10 5'/></g></svg> <span>" + expander.nextElementSibling.dataset.title + "</span>";
expander.style.borderBottomLeftRadius = "0";
expander.style.borderBottomRightRadius = "0";
}
else {
// close expander body
expander.nextElementSibling.style.display = "none";
expander.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 5 5 L 10 1'/><path d='M 1 1 L 5 5'/></g></svg> <span>" + expander.nextElementSibling.dataset.title + "</span>";
expander.style.borderBottomLeftRadius = "6px";
expander.style.borderBottomRightRadius = "6px";
}
}
}
}, true);
item.parentNode.insertBefore(divHeader, item);
item.style.display = "none";
}
});
</script>
Check out Jed Foster's Readmore.js library.
It's usage is as simple as:
$(document).ready(function() {
$('article').readmore({collapsedHeight: 100});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js" type="text/javascript"></script>
<article>
<p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>
<p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
<p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>
<p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
</article>
Here are the available options to configure your widget:
{
speed: 100,
collapsedHeight: 200,
heightMargin: 16,
moreLink: 'Read More',
lessLink: 'Close',
embedCSS: true,
blockCSS: 'display: block; width: 100%;',
startOpen: false,
// callbacks
blockProcessed: function() {},
beforeToggle: function() {},
afterToggle: function() {}
},
Use can use it like:
$('article').readmore({
collapsedHeight: 100,
moreLink: 'Continue reading...',
});
I hope it helps.
Using Pure Javascript
const collapsableBtn = document.querySelectorAll('.collapsable-toggle');
for (let index = 0; index < collapsableBtn.length; index++) {
collapsableBtn[index].addEventListener('click', function(e) {
// e.preventDefault();
e.stopImmediatePropagation();
iterateElement = this;
getCollapsableParent = iterateElement.parentElement;
if(getCollapsableParent.classList.contains('show')) {
getCollapsableParent.classList.remove('show')
iterateElement.innerText = iterateElement.getAttribute('data-onCloseText');
} else {
getCollapsableParent.classList.add('show');
iterateElement.innerText = iterateElement.getAttribute('data-onOpenText');
}
})
}
.collapsable-container #expand {
display:none;
}
.collapsable-container.show #expand {
display:block;
}
<div class="collapsable-container">
Show First Content
<div id="expand">
This is some Content
</div>
</div>
<div class="collapsable-container">
Show Second Content
<div id="expand">
This is some Content
</div>
</div>
I have a header that is aligned correctly when I view it offline, as well as online using Safari. When I view it online with chrome it is incorrectly aligned, but if I refresh the page it will then align properly.
Here is the url to the website to observe the issue yourselves: http://viscovisco.com/ (refresh browser to see it fix itself, the issue only seems to happen in chrome).
Also feel free to inspect element. Let me know if you need further information.
Here is the HTML code for the section that seems to be working improperly online:
<div class = "container">
<div id="box1">
<span id="firstname" onmouseover="nameToMatt()" onmouseout="defaultMode()">VISCO</span>
<span id="lastname" onmouseover="nameToLexi()" onmouseout="defaultMode()">VISCO</span>
<br>
<span id="information"></span>
<br>
Design & Programming
</div>
<div id="rightBoxes">
<div id="box2">
<i>Est.</i> 2014.
<br>
Based in SF Bay Area
</div>
<div id="box3">
<div class="letter"> L </div> 510 541 2464
<br>
<div class="letter"> M </div> 510 367 6435
</div>
<div id="box4">
Hallo!
<br>
projects#viscovisco.com
</div>
</div>
</div>
Here is the associated CSS:
.container {
font-family: "Times New Roman", Times, serif;
font-size: 18.66px;
line-height: 22.4px;
min-width:960px;
}
.container > div {
display: inline-block;
}
#box1 {
width: 340px;
}
#rightBoxes {
float: right;
}
#rightBoxes > div {
float: left;
}
#box2 {
margin-right: 45px;
}
#box3 {
margin-right: 81px;
}
Here's a screen shot of both correct and incorrect formatting of the website. On the left is the incorrect format that I only see on the online website in Chrome broswer when I first open the website. On the right is the correct format which Chrome switches to if website is refreshed (this format is also seen offline and on Safari):
(image cuts a bit of the website off, you should be able to see full website and notice the behavior described by clicking the link provided above)
So, I'm making it where their is some buttons, and when one is clicked it makes the hidden DIV with contents unhide, this is what I have:
HTML
<div id="disArea"> <!--The toggled Dac diplays in this area.-->
<div class="Dac 1">
<p>Dac 1/p>
</div>
<div class="Dac 2">
<p>Dac 2/p>
</div>
<div class="Dac 3">
<p>Dac 3/p>
</div>
<div class="Dac 4">
<p>Dac 4/p>
</div>
<div class="Dac 5">
<p>Dac 5/p>
</div>
</div>
<div class="ibox" onclick="disToggle('.1')">Button 1 (Displays the Dac 1)</div>
<div class="ibox" onclick="disToggle('.2')">Button 2 (Displays the Dac 2)</div>
<div class="ibox" onclick="disToggle('.3')">Button 3 (Displays the Dac 3)</div>
<div class="ibox" onclick="disToggle('.4')">Button 4 (Displays the Dac 4)</div>
<div class="ibox" onclick="disToggle('.5')">Button 5 (Displays the Dac 5)</div>
Please remember that the div's with the class of "Dac" are hidden until jQuery executes the following (well, that is what I want to do, but it doesn't):
jQuery / JavaScript
function disToggle(DacNumClass)
{
$("ibox").click(function()
{
$(DacNumClass).toggle();
});
}
I've done this by using a JavaScript function with a argument, the argument calls out the Id, or class that I need to .toggle(). This could be the complete wrong idea, correct me if I am wrong. How this works is ever Dac has a number class along with it, and the function argument is the class e.g. divToggle()
And I have lastly my CSS, not sure if this important at all, but here it is:
CSS
#disArea {
width: 300px;
height: 300px;
margin-right: auto;
margin-left: auto;
background: green;
}
.Dac {
display: none;
}
.ibox {
background: red;
display: block;
width: 125px;
height: 125px;
margin: 5px;
}
It doesn't seem to be toggling? what have I done wrong?
jsFiddle Example
EDIT
*Fixed link with the /p> instead of </p>
Also, is it possible to have only one Dac Div open at a time?
Since disToggle itself is a click handler you should just toggle the target element inside the method.
Also since the method disToggle is used as a inlined handler it should be added to the global scope, by default jsfiddle will add the given script in window.onload=function(){...} wrapper which will make the disToggle method a private one to the onload handler. You need to select No Wrap - Body/Head in Left Side Panel -> Second Dropdown
function disToggle(DacNumClass) {
$('.Dac').not(DacNumClass).hide()
$(DacNumClass).toggle();
}
Demo: Fiddle
A more jQuery-ish solution
<div class="ibox" data-target=".1">Button 1 (Displays the Dac 1)</div>
<div class="ibox" data-target=".2">Button 2 (Displays the Dac 2)</div>
<div class="ibox" data-target=".3">Button 3 (Displays the Dac 3)</div>
<div class="ibox" data-target=".4">Button 4 (Displays the Dac 4)</div>
<div class="ibox" data-target=".5">Button 5 (Displays the Dac 5)</div>
then
jQuery(function ($) {
var $dacs = $('.Dac');
$('.ibox').click(function () {
var target = $(this).data('target');
$dacs.not(target).hide();
$(target).toggle();
})
})
Demo: Fiddle
I have created a list on my site. This list is created by a foreach loop that builds with information from my database. Each item is a container with different sections, so this is not a list like 1, 2, 3... etc. I am listing repeating sections with information. In each section, there is a subsection. The general build is as follows:
<div>
<fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
<legend class="majorpointslegend">Expand</legend>
<div style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"
The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.
The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.
Here is the javascript:
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
document.write.$(this).find('div').style = "display:inherit";
document.write.$(this).find('legend').innerHTML = "Collapse";
}
else
{
document.write.$(this).find('div').style = "display:none";
document.write.$(this).find('legend').innerHTML = "Expand";
}
}
I am almost 100% sure my problem is syntax, and I don't have much of a grasp on how javascript works.
I do have jQuery linked to the document with:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
In the <head></head> section.
Okay, so you've got two options here :
Use jQuery UI's accordion - its nice, easy and fast. See more info here
Or, if you still wanna do this by yourself, you could remove the fieldset (its not semantically right to use it for this anyway) and create a structure by yourself.
Here's how you do that. Create a HTML structure like this :
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
With this CSS: (This is to hide the .content stuff when the page loads.
.container .content {
display: none;
padding : 5px;
}
Then, using jQuery, write a click event for the header.
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Here's a demo : http://jsfiddle.net/hungerpain/eK8X5/7/
how about:
jQuery:
$('.majorpoints').click(function(){
$(this).find('.hider').toggle();
});
HTML
<div>
<fieldset class="majorpoints">
<legend class="majorpointslegend">Expand</legend>
<div class="hider" style="display:none" >
<ul>
<li>cccc</li>
<li></li>
</ul>
</div>
</div>
Fiddle
This way you are binding the click event to the .majorpoints class an you don't have to write it in the HTML each time.
You might want to give a look at this simple Javascript method to be invoked when clicking on a link to make a panel/div expande or collapse.
<script language="javascript">
function toggle(elementId) {
var ele = document.getElementById(elementId);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
You can pass the div ID and it will toggle between display 'none' or 'block'.
Original source on snip2code - How to collapse a div in html
So, first of all, your Javascript isn't even using jQuery. There are a couple ways to do this. For example:
First way, using the jQuery toggle method:
<div class="expandContent">
Click Here to Display More Content
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').toggle();
});
</script>
jsFiddle: http://jsfiddle.net/pM3DF/
Another way is simply to use the jQuery show method:
<div class="expandContent">
Click Here to Display More Content
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').show();
});
</script>
jsFiddle: http://jsfiddle.net/Q2wfM/
Yet a third way is to use the slideToggle method of jQuery which allows for some effects. Such as $('#showMe').slideToggle('slow'); which will slowly display the hidden div.
Many problems here
I've set up a fiddle that works for you: http://jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){
if($(this).text()=='Expand'){
$('#mylist').show();
$(this).text('Colapse');
}else{
$('#mylist').hide();
$(this).text('Expand');
}
});
try jquery,
<div>
<a href="#" class="majorpoints" onclick="majorpointsexpand(" + $('.majorpointslegend').html() + ")"/>
<legend class="majorpointslegend">Expand</legend>
<div id="data" style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
$('#data').css("display","inherit");
$(".majorpointslegend").html("Collapse");
}
else
{
$('#data').css("display","none");
$(".majorpointslegend").html("Expand");
}
}
Here there is my example of animation a staff list with expand a description.
<html>
<head>
<style>
.staff { margin:10px 0;}
.staff-block{ float: left; width:48%; padding-left: 10px; padding-bottom: 10px;}
.staff-title{ font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white; padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-weight: bold;}
.staff-name { font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;}
.staff-name:hover { background-color: silver !important; cursor: pointer;}
.staff-section { display:inline-block; padding-left: 10px;}
.staff-desc { font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}
.staff-desc p { text-align: justify; margin-top: 5px;}
.staff-desc img { margin: 5px 10px 5px 5px; float:left; height: 185px; }
</style>
</head>
<body>
<!-- START STAFF SECTION -->
<div class="staff">
<div class="staff-block">
<div class="staff-title">Staff</div>
<div class="staff-section">
<div class="staff-name">Maria Beavis</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p>
</div>
<div class="staff-name">Diana Smitt</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p>
</div>
<div class="staff-name">Mike Ford</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p>
</div>
</div>
</div>
<div class="staff-block">
<div class="staff-title">Technical Advisors</div>
<div class="staff-section">
<div class="staff-name">TA Elvira Bett</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client portfolios, maintaining investment objectives, and executing client trades.</p>
</div>
<div class="staff-name">TA Sonya Rosman</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute. She recently completed her Wealth Management Essentials course and became an Investment Associate.</p>
</div>
<div class="staff-name">TA Tim Herson</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Tim joined his father’s group in order to continue advising affluent families in Quebec. He is currently President of the Mike Ford Professionals Association and a member of various other organisations.</p>
</div>
</div>
</div>
</div>
<!-- STOP STAFF SECTION -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript"><!--
//<![CDATA[
$('.staff-name').hover(function() {
$(this).toggleClass('hover');
});
var lastItem;
$('.staff-name').click(function(currentItem) {
var currentItem = $(this);
if ($(this).next().height() == 0) {
$(lastItem).css({'font-weight':'normal'});
$(lastItem).next().animate({height: '0px'},400,'swing');
$(this).css({'font-weight':'bold'});
$(this).next().animate({height: '300px',opacity: 1},400,'swing');
} else {
$(this).css({'font-weight':'normal'});
$(this).next().animate({height: '0px',opacity: 1},400,'swing');
}
lastItem = $(this);
});
//]]>
--></script>
</body></html>
Fiddle
Take a look at toggle() jQuery function :
http://api.jquery.com/toggle/
Also, innerHTML jQuery Function is .html().
Since you have jQuery on the page, you can remove that onclick attribute and the majorpointsexpand function. Add the following script to the bottom of you page or, preferably, to an external .js file:
$(function(){
$('.majorpointslegend').click(function(){
$(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
This solutionshould work with your HTML as is but it isn't really a very robust answer. If you change your fieldset layout, it could break it. I'd suggest that you put a class attribute in that hidden div, like class="majorpointsdetail" and use this code instead:
$(function(){
$('.majorpoints').on('click', '.majorpointslegend', function(event){
$(event.currentTarget).find('.majorpointsdetail').toggle();
$(this).text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Obs: there's no closing </fieldset> tag in your question so I'm assuming the hidden div is inside the fieldset.
If you used the data-role collapsible e.g.
<div id="selector" data-role="collapsible" data-collapsed="true">
html......
</div>
then it will close the the expanded div
$("#selector").collapsible().collapsible("collapse");
Pure javascript allowing only one expanded div at a time. It allows multi-level sub-expanders. The html only need the expanders contents. The javascript will create the expanders headers with the titles form the content data attribute and a svg arrow.
<style>
/* expanders headers divs */
.expanderHead {
color: white;
background-color: #1E9D8B;
border: 2px solid #1E9D8B;
margin-top: 9px;
border-radius: 6px;
padding: 3px;
padding-left: 9px;
cursor: default;
font-family: Verdana;
font-size: 14px;
}
.expanderHead:first-child {
margin-top: 0 !important;
}
.expanderBody:last-child {
margin-bottom: 0 !important;
}
/* expanders svg arrows */
.expanderHead svg > g > path {
fill: none;
stroke: white;
stroke-width: 2;
stroke-miterlimit: 5;
pointer-events: stroke;
}
/* expanders contents divs */
.expanderBody {
border: 2px solid #1E9D8B;
border-top: 0;
background-color: white;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
padding: 6px;
font-family: Verdana;
font-size: 12px;
}
/* widget window */
.widget {
width: 400px;
background-color: white;
padding: 9px;
border: 2px solid #1E9D8B;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<div class="widget">
<div data-title="expander 1" class="expanderBody">
expander 1 content
</div>
<div data-title="expander 2" class="expanderBody">
expander 2 content
</div>
<div data-title="expander 3" class="expanderBody">
<div>
expander 3 content
</div>
<div data-title="expander 3.1" class="expanderBody">
expander 3.1 content
</div>
<div data-title="expander 3.2" class="expanderBody">
expander 3.2 content
</div>
<div data-title="expander 3.3" class="expanderBody">
expander 3.3 content
</div>
</div>
</div>
<script>
document.querySelectorAll(".expanderBody").forEach(item => {
if (item.dataset.title) {
// create expander header
let divHeader = document.createElement("div");
divHeader.className = "expanderHead";
divHeader.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 5 5 L 10 1'/><path d='M 1 1 L 5 5'/></g></svg> <span>" + item.dataset.title + "</span>";
// expander click event
divHeader.addEventListener("click", function () {
// open / close expander
for (let i = 0; i < this.parentNode.children.length; i++) {
let expander = this.parentNode.children[i];
// check if it's expander header
if (expander.className == "expanderHead") {
if (expander == this && expander.nextElementSibling.style.display == "none") {
// open expander body
expander.nextElementSibling.style.display = "";
expander.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 1 5 L 5 1'/><path d='M 5 1 L 10 5'/></g></svg> <span>" + expander.nextElementSibling.dataset.title + "</span>";
expander.style.borderBottomLeftRadius = "0";
expander.style.borderBottomRightRadius = "0";
}
else {
// close expander body
expander.nextElementSibling.style.display = "none";
expander.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 5 5 L 10 1'/><path d='M 1 1 L 5 5'/></g></svg> <span>" + expander.nextElementSibling.dataset.title + "</span>";
expander.style.borderBottomLeftRadius = "6px";
expander.style.borderBottomRightRadius = "6px";
}
}
}
}, true);
item.parentNode.insertBefore(divHeader, item);
item.style.display = "none";
}
});
</script>
Check out Jed Foster's Readmore.js library.
It's usage is as simple as:
$(document).ready(function() {
$('article').readmore({collapsedHeight: 100});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js" type="text/javascript"></script>
<article>
<p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>
<p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
<p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>
<p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
</article>
Here are the available options to configure your widget:
{
speed: 100,
collapsedHeight: 200,
heightMargin: 16,
moreLink: 'Read More',
lessLink: 'Close',
embedCSS: true,
blockCSS: 'display: block; width: 100%;',
startOpen: false,
// callbacks
blockProcessed: function() {},
beforeToggle: function() {},
afterToggle: function() {}
},
Use can use it like:
$('article').readmore({
collapsedHeight: 100,
moreLink: 'Continue reading...',
});
I hope it helps.
Using Pure Javascript
const collapsableBtn = document.querySelectorAll('.collapsable-toggle');
for (let index = 0; index < collapsableBtn.length; index++) {
collapsableBtn[index].addEventListener('click', function(e) {
// e.preventDefault();
e.stopImmediatePropagation();
iterateElement = this;
getCollapsableParent = iterateElement.parentElement;
if(getCollapsableParent.classList.contains('show')) {
getCollapsableParent.classList.remove('show')
iterateElement.innerText = iterateElement.getAttribute('data-onCloseText');
} else {
getCollapsableParent.classList.add('show');
iterateElement.innerText = iterateElement.getAttribute('data-onOpenText');
}
})
}
.collapsable-container #expand {
display:none;
}
.collapsable-container.show #expand {
display:block;
}
<div class="collapsable-container">
Show First Content
<div id="expand">
This is some Content
</div>
</div>
<div class="collapsable-container">
Show Second Content
<div id="expand">
This is some Content
</div>
</div>