After browsing through a jQuery slider toggler tutorial on w3schools, I was inspired to create my own. However, I wanted a more flexible approach where I wouldn't have to rigidly define CSS styles and jQuery functions.
Unlike the implementation on w3schools, I aimed for something like this:
function toggleX(fid,pid){
var flipvar = document.getElementById(fid);
var panelvar = document.getElementById(pid);
$(document).ready(function(){
$(flipvar).click(function(){
$(panelvar).slideToggle("slow");
});
});
}
The key requirement was to achieve this effect in HTML by simply doing the following:
<div id="flip" onclick="toggleX('flip','panel');">...</div>
<div id="panel">...</div>
<!-- Repeat for any number of DIVs -->
<div id="flip1" onclick="toggleX('flip1','panel1');">...</div>
<div id="panel1">...</div>
If you need a visual representation, see the snippet below for reference and suggest any improvements.
function toggleX(fid,pid){
fid.style.background="#fff"; // Testing purposes only
}
// Once the above function works as intended, I plan to use the function below with IDs obtained from the onclick event
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="flip" onclick="toggleX('flip','panel');">Only this one works correctly now (Click me)</div>
<div id="panel">This slider only works for THIS div, deriving its style from 'panel' and 'flip' CSS. Can I get those CSS attributes by ID?<br/>(for flip1,panel1,flip2,panel2...and so on?)</div>
<div id="flip2" onclick="toggleX('flip2','panel2');">I want this DIV to also slide up and down!</div>
<div id="panel2">And I want to get CSS style from ID too! :/</div>
<!--
I want this functionality for any number of IDs that follow the same pattern.
-->Breaking down the requirements:
I want:
- A slider toggle for multiple divs
- Each independent but sharing a central function and CSS styling
I do not want:
Class-based solution - an ID-based solution is preferred, as seen in related answers.
- Multiple CSS definitions - I aim for clean CSS without defining styles multiple times for each div
- Multiple functions for different IDs - preferring a single universal jQuery function placed in the template for widespread usage
My ideal solution involves:
<div id="flip" onclick="toggleX('flip','panel');">...</div>
<div id="panel">...</div>
<!-- Repeat for any number of DIVs -->
<div id="flip1" onclick="toggleX('flip1','panel1');">...</div>
<div id="panel1">...</div>
What type of solution am I looking for?
- Open to creative solutions even if they don't strictly adhere to the specified requirements
- Best practices - seeking advice from experienced individuals for optimal toggle slider implementations
- Collaboration - extending the invitation for assistance or suggestions from others struggling with similar challenges