i need to hide/show a div on click of another div in the same page. How to perform that?

0
i need to hide/show a div on click of another divin the same page. How to perform that?
asked
5 answers
2

You could make use of condintional visibility with a boolean. On click of the div you trigger a microflow that changes the boolean with a refresh. In the page you set a condintional visibility based on this boolean.

answered
2

Hi Manoj,

A colleague of mine developed a simple Custom Widget to achieve just this. You can grab the widget .mpk here. Download that file and include it in the widgets folder in your project directory, then hit f4 in the modeler to synchronize so the modeler can see the new widget file.

Documentation for the widget can be found at the Github repo's readme.

Thanks,

Conner

answered
1

Hi Manoj,

Another approach would be to write a javascript code. You will need to store both the Div ID's(Name) in two variables. Post that you can write a onchange function to make a change to show/hide the visibility of the div.

This can be accomplished in an HTML Snippet. Let me know if this helps,

 

Thanks,

Karthik SM

answered
1

Manoj,

As you probably know, Container objects in Mendix are created on the page as simple Divs.  So you could accomplish this using the Clickable Container widget in the appstore.  This is along the lines of what Maarten suggested.

Create an entity with a boolean attribute that controls the display of the second Container.  On a page, add two Containers inside of a Dataview pointing to your entity.  In one container, add the Clickable Container widget and configure it to call a microflow that changes the boolean attribute to show or hide the second container.

Hope that helps,

Mike

answered
1

Hi Manoj,

Please find below the code you can use in a html snippet to toggle a certain element on a page based on a click on another element.

The .toggler class needs to be set on the element you want to click.

The .hiderorshow class needs to be placed on the element you want to hide/show.

Put "display:none;""  on the element you want to hide/show. This element will then by default be hidden. The .hideorshow class should be defined in your (S)CSS stylesheets and should contain "display:block;". On click of the toggler the .hideorshow class will be added to the hidden element, since it contains "display: block;", the element will appear. Of course this can also be defined the other way around.

The .toggler class does not need to be defined in your stylehsheets. It is merely for the JS to select the element. 

 

$(".toggler").click(function() {
$(".hideorshow").toggle();
});

answered