Elxis CMS Forum
Support => Elxis 4.x/5.x DEV => Topic started by: bully on October 02, 2019, 11:17:59
-
Hello Gurus,
I have some quite heavy issues to get my working. The script itself is working fine, however, inside elxis 4.x it fails
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible
The site is set to HTML5, in case it does matter.
Here some demo code from the link above
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll.addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
bully
-
Instead to do this you can use the existed Slider plugin https://www.elxis.net/edc/effects/36.html which does the same job.
-
@ lot of thx
Will do that and hopefully get to work ;)
-
I have used it on an Elxis 4.6 site and works fine.
-
I also was looking before for the plugin. I just know, something somehow, I dead read about, but just could not find it or any hint again. Yep, got it work now somehow :D
Someone almost always knows something
-
I would like also to inform you that the slider.css file which is into includes folder, needs a correction on lines 20 and 38 as below:
Replace line 20 with this: background: url(../images/plus.png) no-repeat scroll 5px 50% #000000;
Replace line 38 with this: .slideractive {background: url(../images/minus.png) no-repeat scroll 5px 50% #000000;}
-
The css is no problem, but still thx.
Another Q to this:
I have use a lot of those sliders, a huge long list, as it covers really a huge structured document. The first block MUST be open, I could fake this, however, then it's not gonna close
Problem initial setting: Only the first slider must be open, all others must be closed. Can that be adjusted somehow?
You have a clue, how to manage this or anyone else?
-
Use Elxis built-in javascript function "elx5Toggle" (Elxis 5.x):
<a href="javascript:void(null);" onclick="elx5Toggle('myitem');">Toggle</a>
<div id="myitem" class="elx5_invisible">Blah blah</div>
If you have a series of items and you want only one to be visible at a time you can create a javascript function to do so. Here is a simple example:
<a href="javascript:void(null);" onclick="toggler(1);">Title 1</a>
<div id="toggle1" class="elx5_zero">Description 1</div>
<a href="javascript:void(null);" onclick="toggler(2);">Title 2</a>
<div id="toggle2" class="elx5_invisible">Description 2</div>
<a href="javascript:void(null);" onclick="toggler(3);">Title 3</a>
<div id="toggle3" class="elx5_invisible">Description 3</div>
function toggler(sfx) {
for (var i=1; i < 4; i++) {
var itemclass = (i == sfx) ? 'elx5_zero' : 'elx5_invisible';
document.getElementById('toggle'+i).className = itemclass;
}
}
To make a nice sliding effect you need to work with item's height instead and create css transitions. Example:
.myitem {
transition: height 0.5s ease;
}
Open height: auto;
Closed height: 0px;
-
Thanks a lot, I will try this in the next few days.
The need is only: whilst ALL expandables are closed, the FIRST one should be OPEN by default. and other behavior works perfectly for my current needs.
My current workaround: the first item is not collapsible
-
Hello datahell,
whilst the idea sounds good, I need to clarify;
I am on this in Elxis 4.6 only. Upgrades to 5 fails.
Open only 1, I have managed without any script by just deleting the end part of all, but not from the last - this works great. One is expanded at one time only.
What I need, is ONLY the 1st collapsible OPEN as INITIAL settings, basically the CLICK on 1st event, all other should remain closed.
-header
Only this content visible
+header (content hidden)
+header (content hidden)
+header (content hidden)
very likely something:
@onpageload
content 1 is visible
-
LOL, I got it
the solution almost ..
to easy
replacing the last line in the slider jquery .js with:
$(".acc_slidertrigger:first").click();
$('html,body').scrollTop(0);
});
today, I was better, than I really are. Someone pay me a beer please hahahahahaha