Display/Hide content above buttons on click
1
I have the following simple slideToggle in jQuery which you can also find in the JSFiddlehere:
$(document).ready(function () {
$(".panel_button").on('click', function () {
$(this).next('.panel').slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>As you can see in the code my target is to have three .buttons and once a .button is clicked the corresponding .contents are displayed.
For example when you click on .button_01 the .panel with .content_01a and .content_01b should be opened.
Therefore, I tried to go with the jQuery slideToggle function but it seems only to work if the .panel is directly below each button. However, in my construction above I need to have the buttons below all panels.
How do I have to change my code to make it work?
jquery html css
asked Nov 21 at 9:05
Michi
1,0901022
add a comment |
1
I have the following simple slideToggle in jQuery which you can also find in the JSFiddlehere:
$(document).ready(function () {
$(".panel_button").on('click', function () {
$(this).next('.panel').slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>As you can see in the code my target is to have three .buttons and once a .button is clicked the corresponding .contents are displayed.
For example when you click on .button_01 the .panel with .content_01a and .content_01b should be opened.
Therefore, I tried to go with the jQuery slideToggle function but it seems only to work if the .panel is directly below each button. However, in my construction above I need to have the buttons below all panels.
How do I have to change my code to make it work?
jquery html css
asked Nov 21 at 9:05
Michi
1,0901022
If there is no logic in document flow, you will need to work withIDs
– Ali Sheikhpour
Nov 21 at 9:11
add a comment |
1
1
1
I have the following simple slideToggle in jQuery which you can also find in the JSFiddlehere:
$(document).ready(function () {
$(".panel_button").on('click', function () {
$(this).next('.panel').slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>As you can see in the code my target is to have three .buttons and once a .button is clicked the corresponding .contents are displayed.
For example when you click on .button_01 the .panel with .content_01a and .content_01b should be opened.
Therefore, I tried to go with the jQuery slideToggle function but it seems only to work if the .panel is directly below each button. However, in my construction above I need to have the buttons below all panels.
How do I have to change my code to make it work?
jquery html css
asked Nov 21 at 9:05
Michi
1,0901022
I have the following simple slideToggle in jQuery which you can also find in the JSFiddlehere:
$(document).ready(function () {
$(".panel_button").on('click', function () {
$(this).next('.panel').slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>As you can see in the code my target is to have three .buttons and once a .button is clicked the corresponding .contents are displayed.
For example when you click on .button_01 the .panel with .content_01a and .content_01b should be opened.
Therefore, I tried to go with the jQuery slideToggle function but it seems only to work if the .panel is directly below each button. However, in my construction above I need to have the buttons below all panels.
How do I have to change my code to make it work?
$(document).ready(function () {
$(".panel_button").on('click', function () {
$(this).next('.panel').slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>$(document).ready(function () {
$(".panel_button").on('click', function () {
$(this).next('.panel').slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>jquery html css
jquery html css
asked Nov 21 at 9:05
Michi
1,0901022
asked Nov 21 at 9:05
Michi
1,0901022
asked Nov 21 at 9:05
Michi
1,0901022
asked Nov 21 at 9:05
Michi
1,0901022
asked Nov 21 at 9:05
Michi
1,0901022
1,0901022
If there is no logic in document flow, you will need to work withIDs
– Ali Sheikhpour
Nov 21 at 9:11
add a comment |
If there is no logic in document flow, you will need to work withIDs
– Ali Sheikhpour
Nov 21 at 9:11
If there is no logic in document flow, you will need to work with
IDs– Ali Sheikhpour
Nov 21 at 9:11
If there is no logic in document flow, you will need to work with
IDs– Ali Sheikhpour
Nov 21 at 9:11
add a comment |
3 Answers
3
active
oldest
votes
3
You need to have data-target to align the click with the panel, and rest you can add your own logic,
Here is the changes I made added data-target attribute and ids to each panel
You can read here that how bootstrap is using that.
$(document).ready(function() {
$(".panel_button").on('click', function() {
var targetPanel = $(this).attr('data-target');
if(!$(targetPanel).is(":visible")){
$(".panel").slideUp();
}
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
border:1px solid white;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
Panel1
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
Panel2
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
Panel3
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:12
Just code
8,71642966
Thanks a lot for your answer but when I click for example on Button_01 the content opens and when I click again on it the content is hidden but opens immediately again and does not stay closed.
– Michi
Nov 21 at 9:16
I updated the JSfiddle here: jsfiddle.net/koanfw15/10
– Michi
Nov 21 at 9:28
1
@Michi I updated my answer please check
– Just code
Nov 21 at 9:31
Cool. Thanks it is working now. By the way in my JSfiddle I was using classes instead of IDs and it is working exactly the same way as with IDs so I am wondering why I should go with IDs if it also works with classes?
– Michi
Nov 21 at 9:32
1
@Michi You can go with classes too, its upto you data-target is your choice.
– Just code
Nov 21 at 9:34
|
show 13 more comments
1
- You could add an ID to the panels
- You could wrap the the panels two separate containers. And using the index of the button clicked to toggle the respective panel inside the panel wrapper. This way you won't need to specify the panel ID every time and is more flexible
$(document).ready(function () {
$(".panel_button").on('click', function () {
const buttonIndex = $(this).index();
$(".panels").children().eq(buttonIndex).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
Thanks man. Nice idea. I also updated it here jsfiddle.net/koanfw15/12
– Michi
Nov 21 at 9:31
This doesn't hide when one panel is already open.
– Just code
Nov 21 at 9:41
add a comment |
1
This might help you. I have made the code so that only one panel is visible at a time using a simple IF - Else condition.
$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
if($(targetPanel).hasClass('active')){
$(targetPanel).removeClass('active').slideUp();
}else{
$(".panel").removeClass('active');
$(targetPanel).addClass('active').slideDown();
}
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel" id="panel2">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel" id="panel3">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:35
ameya
614
Thanks for your answer. I also updated it here jsfiddle.net/koanfw15/14
– Michi
Nov 21 at 9:42
You're Welcome! :)
– ameya
Nov 21 at 9:50
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
});
}
});
draft saved
draft discarded
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%2f53408520%2fdisplay-hide-content-above-buttons-on-click%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
You need to have data-target to align the click with the panel, and rest you can add your own logic,
Here is the changes I made added data-target attribute and ids to each panel
You can read here that how bootstrap is using that.
$(document).ready(function() {
$(".panel_button").on('click', function() {
var targetPanel = $(this).attr('data-target');
if(!$(targetPanel).is(":visible")){
$(".panel").slideUp();
}
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
border:1px solid white;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
Panel1
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
Panel2
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
Panel3
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:12
Just code
8,71642966
Thanks a lot for your answer but when I click for example on Button_01 the content opens and when I click again on it the content is hidden but opens immediately again and does not stay closed.
– Michi
Nov 21 at 9:16
I updated the JSfiddle here: jsfiddle.net/koanfw15/10
– Michi
Nov 21 at 9:28
1
@Michi I updated my answer please check
– Just code
Nov 21 at 9:31
Cool. Thanks it is working now. By the way in my JSfiddle I was using classes instead of IDs and it is working exactly the same way as with IDs so I am wondering why I should go with IDs if it also works with classes?
– Michi
Nov 21 at 9:32
1
@Michi You can go with classes too, its upto you data-target is your choice.
– Just code
Nov 21 at 9:34
|
show 13 more comments
3
You need to have data-target to align the click with the panel, and rest you can add your own logic,
Here is the changes I made added data-target attribute and ids to each panel
You can read here that how bootstrap is using that.
$(document).ready(function() {
$(".panel_button").on('click', function() {
var targetPanel = $(this).attr('data-target');
if(!$(targetPanel).is(":visible")){
$(".panel").slideUp();
}
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
border:1px solid white;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
Panel1
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
Panel2
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
Panel3
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:12
Just code
8,71642966
Thanks a lot for your answer but when I click for example on Button_01 the content opens and when I click again on it the content is hidden but opens immediately again and does not stay closed.
– Michi
Nov 21 at 9:16
I updated the JSfiddle here: jsfiddle.net/koanfw15/10
– Michi
Nov 21 at 9:28
1
@Michi I updated my answer please check
– Just code
Nov 21 at 9:31
Cool. Thanks it is working now. By the way in my JSfiddle I was using classes instead of IDs and it is working exactly the same way as with IDs so I am wondering why I should go with IDs if it also works with classes?
– Michi
Nov 21 at 9:32
1
@Michi You can go with classes too, its upto you data-target is your choice.
– Just code
Nov 21 at 9:34
|
show 13 more comments
3
3
3
You need to have data-target to align the click with the panel, and rest you can add your own logic,
Here is the changes I made added data-target attribute and ids to each panel
You can read here that how bootstrap is using that.
$(document).ready(function() {
$(".panel_button").on('click', function() {
var targetPanel = $(this).attr('data-target');
if(!$(targetPanel).is(":visible")){
$(".panel").slideUp();
}
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
border:1px solid white;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
Panel1
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
Panel2
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
Panel3
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:12
Just code
8,71642966
You need to have data-target to align the click with the panel, and rest you can add your own logic,
Here is the changes I made added data-target attribute and ids to each panel
You can read here that how bootstrap is using that.
$(document).ready(function() {
$(".panel_button").on('click', function() {
var targetPanel = $(this).attr('data-target');
if(!$(targetPanel).is(":visible")){
$(".panel").slideUp();
}
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
border:1px solid white;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
Panel1
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
Panel2
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
Panel3
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>$(document).ready(function() {
$(".panel_button").on('click', function() {
var targetPanel = $(this).attr('data-target');
if(!$(targetPanel).is(":visible")){
$(".panel").slideUp();
}
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
border:1px solid white;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
Panel1
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
Panel2
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
Panel3
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>$(document).ready(function() {
$(".panel_button").on('click', function() {
var targetPanel = $(this).attr('data-target');
if(!$(targetPanel).is(":visible")){
$(".panel").slideUp();
}
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
border:1px solid white;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
Panel1
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
Panel2
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content2a</div>
<div class="content_03b">Here goes content2b</div>
Panel3
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:12
Just code
8,71642966
edited Nov 21 at 9:47
answered Nov 21 at 9:12
Just code
8,71642966
answered Nov 21 at 9:12
Just code
8,71642966
answered Nov 21 at 9:12
Just code
8,71642966
8,71642966
Thanks a lot for your answer but when I click for example on Button_01 the content opens and when I click again on it the content is hidden but opens immediately again and does not stay closed.
– Michi
Nov 21 at 9:16
I updated the JSfiddle here: jsfiddle.net/koanfw15/10
– Michi
Nov 21 at 9:28
1
@Michi I updated my answer please check
– Just code
Nov 21 at 9:31
Cool. Thanks it is working now. By the way in my JSfiddle I was using classes instead of IDs and it is working exactly the same way as with IDs so I am wondering why I should go with IDs if it also works with classes?
– Michi
Nov 21 at 9:32
1
@Michi You can go with classes too, its upto you data-target is your choice.
– Just code
Nov 21 at 9:34
|
show 13 more comments
Thanks a lot for your answer but when I click for example on Button_01 the content opens and when I click again on it the content is hidden but opens immediately again and does not stay closed.
– Michi
Nov 21 at 9:16
I updated the JSfiddle here: jsfiddle.net/koanfw15/10
– Michi
Nov 21 at 9:28
1
@Michi I updated my answer please check
– Just code
Nov 21 at 9:31
Cool. Thanks it is working now. By the way in my JSfiddle I was using classes instead of IDs and it is working exactly the same way as with IDs so I am wondering why I should go with IDs if it also works with classes?
– Michi
Nov 21 at 9:32
1
@Michi You can go with classes too, its upto you data-target is your choice.
– Just code
Nov 21 at 9:34
Thanks a lot for your answer but when I click for example on Button_01 the content opens and when I click again on it the content is hidden but opens immediately again and does not stay closed.
– Michi
Nov 21 at 9:16
Thanks a lot for your answer but when I click for example on Button_01 the content opens and when I click again on it the content is hidden but opens immediately again and does not stay closed.
– Michi
Nov 21 at 9:16
I updated the JSfiddle here: jsfiddle.net/koanfw15/10
– Michi
Nov 21 at 9:28
I updated the JSfiddle here: jsfiddle.net/koanfw15/10
– Michi
Nov 21 at 9:28
1
1
@Michi I updated my answer please check
– Just code
Nov 21 at 9:31
@Michi I updated my answer please check
– Just code
Nov 21 at 9:31
Cool. Thanks it is working now. By the way in my JSfiddle I was using classes instead of IDs and it is working exactly the same way as with IDs so I am wondering why I should go with IDs if it also works with classes?
– Michi
Nov 21 at 9:32
Cool. Thanks it is working now. By the way in my JSfiddle I was using classes instead of IDs and it is working exactly the same way as with IDs so I am wondering why I should go with IDs if it also works with classes?
– Michi
Nov 21 at 9:32
1
1
@Michi You can go with classes too, its upto you data-target is your choice.
– Just code
Nov 21 at 9:34
@Michi You can go with classes too, its upto you data-target is your choice.
– Just code
Nov 21 at 9:34
|
show 13 more comments
1
- You could add an ID to the panels
- You could wrap the the panels two separate containers. And using the index of the button clicked to toggle the respective panel inside the panel wrapper. This way you won't need to specify the panel ID every time and is more flexible
$(document).ready(function () {
$(".panel_button").on('click', function () {
const buttonIndex = $(this).index();
$(".panels").children().eq(buttonIndex).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
Thanks man. Nice idea. I also updated it here jsfiddle.net/koanfw15/12
– Michi
Nov 21 at 9:31
This doesn't hide when one panel is already open.
– Just code
Nov 21 at 9:41
add a comment |
1
- You could add an ID to the panels
- You could wrap the the panels two separate containers. And using the index of the button clicked to toggle the respective panel inside the panel wrapper. This way you won't need to specify the panel ID every time and is more flexible
$(document).ready(function () {
$(".panel_button").on('click', function () {
const buttonIndex = $(this).index();
$(".panels").children().eq(buttonIndex).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
Thanks man. Nice idea. I also updated it here jsfiddle.net/koanfw15/12
– Michi
Nov 21 at 9:31
This doesn't hide when one panel is already open.
– Just code
Nov 21 at 9:41
add a comment |
1
1
1
- You could add an ID to the panels
- You could wrap the the panels two separate containers. And using the index of the button clicked to toggle the respective panel inside the panel wrapper. This way you won't need to specify the panel ID every time and is more flexible
$(document).ready(function () {
$(".panel_button").on('click', function () {
const buttonIndex = $(this).index();
$(".panels").children().eq(buttonIndex).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
- You could add an ID to the panels
- You could wrap the the panels two separate containers. And using the index of the button clicked to toggle the respective panel inside the panel wrapper. This way you won't need to specify the panel ID every time and is more flexible
$(document).ready(function () {
$(".panel_button").on('click', function () {
const buttonIndex = $(this).index();
$(".panels").children().eq(buttonIndex).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>$(document).ready(function () {
$(".panel_button").on('click', function () {
const buttonIndex = $(this).index();
$(".panels").children().eq(buttonIndex).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>$(document).ready(function () {
$(".panel_button").on('click', function () {
const buttonIndex = $(this).index();
$(".panels").children().eq(buttonIndex).slideToggle(0);
$(this).toggleClass('active');
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panels">
<div class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button"> Button_01 </div>
<div class="panel_button"> Button_02 </div>
<div class="panel_button"> Button_03 </div>
</div>answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
answered Nov 21 at 9:22
Manuel David Sánchez Suero
886
886
Thanks man. Nice idea. I also updated it here jsfiddle.net/koanfw15/12
– Michi
Nov 21 at 9:31
This doesn't hide when one panel is already open.
– Just code
Nov 21 at 9:41
add a comment |
Thanks man. Nice idea. I also updated it here jsfiddle.net/koanfw15/12
– Michi
Nov 21 at 9:31
This doesn't hide when one panel is already open.
– Just code
Nov 21 at 9:41
Thanks man. Nice idea. I also updated it here jsfiddle.net/koanfw15/12
– Michi
Nov 21 at 9:31
Thanks man. Nice idea. I also updated it here jsfiddle.net/koanfw15/12
– Michi
Nov 21 at 9:31
This doesn't hide when one panel is already open.
– Just code
Nov 21 at 9:41
This doesn't hide when one panel is already open.
– Just code
Nov 21 at 9:41
add a comment |
1
This might help you. I have made the code so that only one panel is visible at a time using a simple IF - Else condition.
$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
if($(targetPanel).hasClass('active')){
$(targetPanel).removeClass('active').slideUp();
}else{
$(".panel").removeClass('active');
$(targetPanel).addClass('active').slideDown();
}
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel" id="panel2">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel" id="panel3">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:35
ameya
614
Thanks for your answer. I also updated it here jsfiddle.net/koanfw15/14
– Michi
Nov 21 at 9:42
You're Welcome! :)
– ameya
Nov 21 at 9:50
add a comment |
1
This might help you. I have made the code so that only one panel is visible at a time using a simple IF - Else condition.
$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
if($(targetPanel).hasClass('active')){
$(targetPanel).removeClass('active').slideUp();
}else{
$(".panel").removeClass('active');
$(targetPanel).addClass('active').slideDown();
}
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel" id="panel2">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel" id="panel3">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:35
ameya
614
Thanks for your answer. I also updated it here jsfiddle.net/koanfw15/14
– Michi
Nov 21 at 9:42
You're Welcome! :)
– ameya
Nov 21 at 9:50
add a comment |
1
1
1
This might help you. I have made the code so that only one panel is visible at a time using a simple IF - Else condition.
$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
if($(targetPanel).hasClass('active')){
$(targetPanel).removeClass('active').slideUp();
}else{
$(".panel").removeClass('active');
$(targetPanel).addClass('active').slideDown();
}
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel" id="panel2">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel" id="panel3">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:35
ameya
614
This might help you. I have made the code so that only one panel is visible at a time using a simple IF - Else condition.
$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
if($(targetPanel).hasClass('active')){
$(targetPanel).removeClass('active').slideUp();
}else{
$(".panel").removeClass('active');
$(targetPanel).addClass('active').slideDown();
}
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel" id="panel2">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel" id="panel3">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
if($(targetPanel).hasClass('active')){
$(targetPanel).removeClass('active').slideUp();
}else{
$(".panel").removeClass('active');
$(targetPanel).addClass('active').slideDown();
}
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel" id="panel2">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel" id="panel3">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
if($(targetPanel).hasClass('active')){
$(targetPanel).removeClass('active').slideUp();
}else{
$(".panel").removeClass('active');
$(targetPanel).addClass('active').slideDown();
}
});
});.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
.panel {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="panel1">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div class="panel" id="panel2">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div class="panel" id="panel3">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>answered Nov 21 at 9:35
ameya
614
answered Nov 21 at 9:35
ameya
614
answered Nov 21 at 9:35
ameya
614
answered Nov 21 at 9:35
ameya
614
614
Thanks for your answer. I also updated it here jsfiddle.net/koanfw15/14
– Michi
Nov 21 at 9:42
You're Welcome! :)
– ameya
Nov 21 at 9:50
add a comment |
Thanks for your answer. I also updated it here jsfiddle.net/koanfw15/14
– Michi
Nov 21 at 9:42
You're Welcome! :)
– ameya
Nov 21 at 9:50
Thanks for your answer. I also updated it here jsfiddle.net/koanfw15/14
– Michi
Nov 21 at 9:42
Thanks for your answer. I also updated it here jsfiddle.net/koanfw15/14
– Michi
Nov 21 at 9:42
You're Welcome! :)
– ameya
Nov 21 at 9:50
You're Welcome! :)
– ameya
Nov 21 at 9:50
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53408520%2fdisplay-hide-content-above-buttons-on-click%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
If there is no logic in document flow, you will need to work with
IDs– Ali Sheikhpour
Nov 21 at 9:11