best solution for alternating an image and div
I have two images that resemble a toggle switch - one in up position and one in down position.
Then I have two divs with different text in them - div A and div B.
I need to display IMAGE_UP and DIV_A. When the user clicks on the image, the image will change to IMAGE_DOWN and DIV_B will be shown instead of DIV_A.
Solutions I've tried:
1) "Toggle Image" handles 3 of the 4 tasks - it displays IMAGE_UP and when clicked changes to IMAGE_DOWN, and DIV_A is hidden. However, I can't figure out how to then show DIV_B. I need some type of alternating element ID of "DIV_A:hide,DIV_B:show" and "DIV_B:hide,DIV_A:show". Can't figure the syntax out. I could probably get it if I could attach an event handler to the toggle image, but event handlers are not an option as a child element.
2) Slider user input element - this works by attaching the "onchange" event handler and then Action-refreshing the divs, and then putting a condition on each div attached to the value of the slider element. I can't show my toggle switch images though. I can change the background image of the slider, but only to one of the two toggle switches and I can't hide the hand of the slider.
3) Image element with onclick event handler and attached action-javascript? - I have not explored this one. Once I got to thinking of this, I decided it would be better to ask in this forum. I know there's an easier way to do this than this #3 solution.
Thoughts?
-
if the toggle isn't meant to refresh any data or content from the server, I prefer to use jQuery to control the logic. This keeps everything browser-side and jQuery provides very simple methods.
<Report ID="LogiForum.Toggle">
<IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" />
<Body>
<Image Caption="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-512.png" Height="30" ID="imgToggle">
<Action Type="Javascript" Javascript="var imgsrc1 = 'https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-512.png';
var imgsrc2 = 'https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-512.png';

if ($('#imgToggle').attr('src') == imgsrc1) {
 $('#imgToggle').attr('src',imgsrc2);
 $('#div1').hide();
 $('#div2').fadeIn();
}
else {
 $('#imgToggle').attr('src',imgsrc1);
 $('#div2').hide();
 $('#div1').fadeIn();
}" />
</Image>
<Division ID="div1" HtmlDiv="True">
<Label Caption="Division 1" Class="h1" />
</Division>
<Division ID="div2" HtmlDiv="True" ShowModes="None">
<Label Caption="Division 2" Class="h1" />
</Division>
</Body>
</Report>Here is the jQuery used:
var imgsrc1 = 'https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-512.png';
var imgsrc2 = 'https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-512.png';
if ($('#imgToggle').attr('src') == imgsrc1) {
$('#imgToggle').attr('src',imgsrc2);
$('#div1').hide();
$('#div2').fadeIn();
}
else {
$('#imgToggle').attr('src',imgsrc1);
$('#div2').hide();
$('#div1').fadeIn();
}0 -
For a Logi Only version using Showmodes and ActionShowElement...
<Report ID="LogiForum.Toggle2">
<Body>
<Division ID="img1">
<Image Caption="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-512.png" Height="30" ID="imgToggle1">
<Action Type="ShowElement" Display="Toggle" ElementID="img2,div2,img1,div1" ID="ase2" />
</Image>
</Division>
<Division ID="img2" ShowModes="None">
<Image Caption="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-512.png" Height="30" ID="imgToggle2">
<Action Type="ShowElement" Display="Toggle" ElementID="img2,div2,img1,div1" ID="ase2" />
</Image>
</Division>
<Division HtmlDiv="True" ID="div1">
<Label Caption="Division 1" Class="h1" />
</Division>
<Division HtmlDiv="True" ID="div2" ShowModes="None">
<Label Caption="Division 2" Class="h1" />
</Division>
</Body>
</Report>0 -
Thank you for the code. I implemented your second solution and it worked perfectly!
0
Please sign in to leave a comment.
Comments
3 comments