Display certain fields from HTML button click

Resolved mockapapella
(@mockapapella)

7 years, 5 months ago
I created an <HTML content> field. In this field I have placed 3 buttons using
```
<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33%;
  padding: 40px;
}

/* Clearfix (clear floats) */
.row {
  margin: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>

<div class="row">
  <div class="column">
    <img src="image_1" style="width:100%">
    <button type="button">6 Lamp T8</button>
  </div>
  <div class="column">
    <img src="image_2" style="width:100%">
    <button type="button">HID</button>
  </div>
  <div class="column">
    <img src="image_3" style="width:100%">
    <button type="button">6 Lamp T5</button>
  </div>
</div>
</body>
</html>
```
Each button has an associated picture with it that all must be displayed next to the button on page load (which I have done). I want different fields to be displayed depending on which button I press. For example, all fields will be hidden until I click button 1. When I do this, I want 3 separate dropdown fields to appear (fieldname1, fieldname2, fieldname3) which pull data from a database, but if I click button 2, dropdowns fieldname4, fieldname5, and fieldname6 will be displayed to the user. I’ve figured out how to use the Dropdown DS field, I just thought I’d mention it in case it’s different from a regular dropdown.

Is it possible to do this with this plugin and if it is, how do I accomplish this?
- This topic was modified 7 years, 5 months ago by mockapapella.
- This topic was modified 7 years, 5 months ago by mockapapella.

Viewing 1 replies (of 1 total)

Plugin Author codepeople
(@codepeople)

7 years, 5 months ago
Hello @mockapapella,

An alternative would be:

– Assign a pair of class names to the fields that depend on the first button: button-1 hide
– Assign a pair of class names to the fields that depend on the second button: button-2 hide
– Assign a pair of class names to the fields that depend on the third button: button-3 hide

Note the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords”, and for assigning multiple class names to a same field, you should separate them with blank characters.

And then, associate the following onclick events to the buttons:

– To the first button:
```
jQuery('.button-1,.button-2,.button-3').addClass('hide');jQuery('.button-1').removeClass('hide');
```
– to the second button:
```
jQuery('.button-1,.button-2,.button-3').addClass('hide');jQuery('.button-2').removeClass('hide');
```
– third button:
```
jQuery('.button-1,.button-2,.button-3').addClass('hide');jQuery('.button-3').removeClass('hide');
```
and that’s all.
Best regards.

Viewing 1 replies (of 1 total)

The topic ‘Display certain fields from HTML button click’ is closed to new replies.

Tags