How can I have the second content area display varying information as per the links in the first column?
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>
jquery html css bootstrap-4 jquery-mobile-collapsible
asked Nov 12 '18 at 23:28
HAWK3R
1
add a comment |
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>
jquery html css bootstrap-4 jquery-mobile-collapsible
asked Nov 12 '18 at 23:28
HAWK3R
1
add a comment |
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>
jquery html css bootstrap-4 jquery-mobile-collapsible
asked Nov 12 '18 at 23:28
HAWK3R
1
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>
jquery html css bootstrap-4 jquery-mobile-collapsible
jquery html css bootstrap-4 jquery-mobile-collapsible
asked Nov 12 '18 at 23:28
HAWK3R
1
asked Nov 12 '18 at 23:28
HAWK3R
1
asked Nov 12 '18 at 23:28
HAWK3R
1
asked Nov 12 '18 at 23:28
HAWK3R
1
asked Nov 12 '18 at 23:28
HAWK3R
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 .column2 to 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):
$('.collapsible').click(function()
//do something, and eventually...
$('.column2').html(/*the data*/);
);
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:
<button class="collapsible" data-parent="#myGroup" data-description="Some text pertaining to the button that the user clicked">#########</button>
And in this case, you would access this with:
$('.collapsible').click(function()
var description = $(this).attr('data-description');
$('.column2').html(description);
);
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 the div, or add a paragraph/span/another DOM element around it, like:
$('.collapsible').click(function()
var description = '<p class="description-class">' + $(this).attr('data-description') + '</p>';
$('.column2').html(description);
);
answered Nov 12 '18 at 23:44
Ryan
3019
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53271594%2fhow-can-i-have-the-second-content-area-display-varying-information-as-per-the-li%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 .column2 to 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):
$('.collapsible').click(function()
//do something, and eventually...
$('.column2').html(/*the data*/);
);
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:
<button class="collapsible" data-parent="#myGroup" data-description="Some text pertaining to the button that the user clicked">#########</button>
And in this case, you would access this with:
$('.collapsible').click(function()
var description = $(this).attr('data-description');
$('.column2').html(description);
);
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 the div, or add a paragraph/span/another DOM element around it, like:
$('.collapsible').click(function()
var description = '<p class="description-class">' + $(this).attr('data-description') + '</p>';
$('.column2').html(description);
);
answered Nov 12 '18 at 23:44
Ryan
3019
add a comment |
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 .column2 to 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):
$('.collapsible').click(function()
//do something, and eventually...
$('.column2').html(/*the data*/);
);
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:
<button class="collapsible" data-parent="#myGroup" data-description="Some text pertaining to the button that the user clicked">#########</button>
And in this case, you would access this with:
$('.collapsible').click(function()
var description = $(this).attr('data-description');
$('.column2').html(description);
);
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 the div, or add a paragraph/span/another DOM element around it, like:
$('.collapsible').click(function()
var description = '<p class="description-class">' + $(this).attr('data-description') + '</p>';
$('.column2').html(description);
);
answered Nov 12 '18 at 23:44
Ryan
3019
add a comment |
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 .column2 to 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):
$('.collapsible').click(function()
//do something, and eventually...
$('.column2').html(/*the data*/);
);
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:
<button class="collapsible" data-parent="#myGroup" data-description="Some text pertaining to the button that the user clicked">#########</button>
And in this case, you would access this with:
$('.collapsible').click(function()
var description = $(this).attr('data-description');
$('.column2').html(description);
);
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 the div, or add a paragraph/span/another DOM element around it, like:
$('.collapsible').click(function()
var description = '<p class="description-class">' + $(this).attr('data-description') + '</p>';
$('.column2').html(description);
);
answered Nov 12 '18 at 23:44
Ryan
3019
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 .column2 to 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):
$('.collapsible').click(function()
//do something, and eventually...
$('.column2').html(/*the data*/);
);
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:
<button class="collapsible" data-parent="#myGroup" data-description="Some text pertaining to the button that the user clicked">#########</button>
And in this case, you would access this with:
$('.collapsible').click(function()
var description = $(this).attr('data-description');
$('.column2').html(description);
);
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 the div, or add a paragraph/span/another DOM element around it, like:
$('.collapsible').click(function()
var description = '<p class="description-class">' + $(this).attr('data-description') + '</p>';
$('.column2').html(description);
);
answered Nov 12 '18 at 23:44
Ryan
3019
edited Nov 12 '18 at 23:51
answered Nov 12 '18 at 23:44
Ryan
3019
answered Nov 12 '18 at 23:44
Ryan
3019
answered Nov 12 '18 at 23:44
Ryan
3019
3019
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53271594%2fhow-can-i-have-the-second-content-area-display-varying-information-as-per-the-li%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
