I would like column 2 to display a description of each button from column 1.
The user is to be able to click on any of the buttons from column 1 and column 2 is to populate with content.
I have spent very long working with iFrames and collapsibles but cannot get it to work and my knowledge is very limited.
Do you know of a way to solve this?
<style>
* {
box-sizing: border-box;
}
.column1 {
float: left;
width: 40%;
padding: 10px;
height: 300px;
}
.column2 {
float: left;
width: 60%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<button class="collapsible"
data-parent="#myGroup">################</button>
<button class="collapsible"
data-parent="#myGroup">################</button>
<button class="collapsible"
data-parent="#myGroup">################</button>
<button class="collapsible"
data-parent="#myGroup">################</button>
<button class="collapsible"
data-parent="#myGroup">################</button>
<button class="collapsible"
data-parent="#myGroup">################</button>
<button class="collapsible"
data-parent="#myGroup">################</button>
<button class="collapsible"
data-parent="#myGroup">################</button>
</div>
<div class="column2" style="background-color:#bbb;">
<p>Some text..</p>
</div>
</div>
</body>
The question is a little unclear - but I'll do what I can to assist based on what I think you're asking.
It sounds like you'd like
.column2to dynamically display data based on the button pressed in.column1. The first thing I'd recommend is to have a unique identifier on each button (an ID for example). This is going to allow you to identify which information needs to be put into.column2. Otherwise, you can check this anonymously, but that could lead you to some confusion later.Next, you'll need to write some jQuery/JavaScript in order to listen for the button click, and then do something. For example (doing it anonymously):
Now, the next portion really depends on where you're getting your data from. One way you can do this is through a
$.post()request through jQuery (Link to Documentation on $.post()) to an external source that feeds you the information (such as a PHP file). Otherwise, you could always add the data directly to the DOM (although this could get messy, along with a slough of other issues that could come from it like formatting, page speeds, etc).If you did choose to put it into the DOM, it might look something like:
And in this case, you would access this with:
Obviously you would probably want to format the data, rather than just spitting text into a
div, so you could either style it based on thediv, or add a paragraph/span/another DOM element around it, like: