HTML + CSS: customise tabs or button groups with images [closed]
I am trying to achieve the UI like Snapchat
They have 4 categories which display on 4 buttons
When user click on any button, it will be toggled and update the content below.
I thought about tabs or button groups. But I have no idea how to customise it with image like Snapchat.
Maybe my approach is not good one, welcome any better approach.
Any suggestion is appreciated.
html css
angular asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
closed as too broad by Ploppy, Pete, cнŝdk, Rob, Mark Rotteveel Nov 21 '18 at 15:08
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
I am trying to achieve the UI like Snapchat
They have 4 categories which display on 4 buttons
When user click on any button, it will be toggled and update the content below.
I thought about tabs or button groups. But I have no idea how to customise it with image like Snapchat.
Maybe my approach is not good one, welcome any better approach.
Any suggestion is appreciated.
html css
angular asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
closed as too broad by Ploppy, Pete, cнŝdk, Rob, Mark Rotteveel Nov 21 '18 at 15:08
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
any tabs plugin will allow you to use what you want in the tab selector, just use css to use a background image for them. however this question is way too broad and therefore off topic for SO
– Pete
Nov 21 '18 at 12:07
add a comment |
I am trying to achieve the UI like Snapchat
They have 4 categories which display on 4 buttons
When user click on any button, it will be toggled and update the content below.
I thought about tabs or button groups. But I have no idea how to customise it with image like Snapchat.
Maybe my approach is not good one, welcome any better approach.
Any suggestion is appreciated.
html css
angular asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
I am trying to achieve the UI like Snapchat
They have 4 categories which display on 4 buttons
When user click on any button, it will be toggled and update the content below.
I thought about tabs or button groups. But I have no idea how to customise it with image like Snapchat.
Maybe my approach is not good one, welcome any better approach.
Any suggestion is appreciated.
html css
angular html css
angular asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
asked Nov 21 '18 at 11:58
Phong VuPhong Vu
3571519
3571519
closed as too broad by Ploppy, Pete, cнŝdk, Rob, Mark Rotteveel Nov 21 '18 at 15:08
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by Ploppy, Pete, cнŝdk, Rob, Mark Rotteveel Nov 21 '18 at 15:08
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
any tabs plugin will allow you to use what you want in the tab selector, just use css to use a background image for them. however this question is way too broad and therefore off topic for SO
– Pete
Nov 21 '18 at 12:07
add a comment |
any tabs plugin will allow you to use what you want in the tab selector, just use css to use a background image for them. however this question is way too broad and therefore off topic for SO
– Pete
Nov 21 '18 at 12:07
any tabs plugin will allow you to use what you want in the tab selector, just use css to use a background image for them. however this question is way too broad and therefore off topic for SO
– Pete
Nov 21 '18 at 12:07
any tabs plugin will allow you to use what you want in the tab selector, just use css to use a background image for them. however this question is way too broad and therefore off topic for SO
– Pete
Nov 21 '18 at 12:07
add a comment |
1 Answer
1
active
oldest
votes
What you are looking for are two things.
- Tab Panel of some sort
- How you can toggle a background image.
Both are actually pretty simple to do with jQuery or JavaScript.
Here is an example on how to make something along those lines. I recommend you reading the comments so you have an idea of what is going on.
function toggleTab(element, tabname) {
// Select all tab panels and hide them
var tabPanels = $('.panel');
// Loop through every element and hide it by changing the display to none
for (var i =0; i < tabPanels.length; i++) {
$(tabPanels[i]).css('display', 'none');
}
// Now that we hid everything we can show the user the element that they clicked on.
// We select the panel that has the ID of tabname
$('#' + tabname).css('display', 'block');
// For toggling styling
var tabButtons = $('.button');
for (var i =0; i < tabButtons.length; i++) {
$(tabButtons[i]).removeClass('toggled');
}
$(element).addClass('toggled');
}#buttoncontainer {
display: flex;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 150px;
font-size: 24px;
text-align: center;
line-height: 150px;
cursor: pointer;
background-color: blue;
color: white;
}
.button:hover {
/* Background-color can also be background-image */
background-color: rgb(0, 0, 160);
}
/* This class will only apply to the div of the active tab panel */
.toggled {
/* Background-color can also be background-image */
background-color: lime !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
<div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
<div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
<div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>
<div id="step1" class="panel">
<h2>Step 1</h2>
<p>This is step 1</p>
</div>
<div id="step2" class="panel" style="display:none">
<h2>Step 2</h2>
<p>This is step 2</p>
</div>
<div id="step3" class="panel" style="display:none">
<h2>Step 3</h2>
<p>This is step 3</p>
</div>I'm sure that you can figure it out for yourself from here. The only thing left to do really is making the proper styling for it.
answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
Thanks for your suggestion, it sounds simple.
– Phong Vu
Nov 21 '18 at 12:23
@PeterPham check my updated answer. I'm sure it answers your question and gives you a good idea on how to do this. If my answer helped / answered your question don't forget to accept the answer.
– RamonRobben
Nov 21 '18 at 12:59
my big thank to you. it's simply what I need.
– Phong Vu
Nov 21 '18 at 13:34
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What you are looking for are two things.
- Tab Panel of some sort
- How you can toggle a background image.
Both are actually pretty simple to do with jQuery or JavaScript.
Here is an example on how to make something along those lines. I recommend you reading the comments so you have an idea of what is going on.
function toggleTab(element, tabname) {
// Select all tab panels and hide them
var tabPanels = $('.panel');
// Loop through every element and hide it by changing the display to none
for (var i =0; i < tabPanels.length; i++) {
$(tabPanels[i]).css('display', 'none');
}
// Now that we hid everything we can show the user the element that they clicked on.
// We select the panel that has the ID of tabname
$('#' + tabname).css('display', 'block');
// For toggling styling
var tabButtons = $('.button');
for (var i =0; i < tabButtons.length; i++) {
$(tabButtons[i]).removeClass('toggled');
}
$(element).addClass('toggled');
}#buttoncontainer {
display: flex;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 150px;
font-size: 24px;
text-align: center;
line-height: 150px;
cursor: pointer;
background-color: blue;
color: white;
}
.button:hover {
/* Background-color can also be background-image */
background-color: rgb(0, 0, 160);
}
/* This class will only apply to the div of the active tab panel */
.toggled {
/* Background-color can also be background-image */
background-color: lime !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
<div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
<div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
<div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>
<div id="step1" class="panel">
<h2>Step 1</h2>
<p>This is step 1</p>
</div>
<div id="step2" class="panel" style="display:none">
<h2>Step 2</h2>
<p>This is step 2</p>
</div>
<div id="step3" class="panel" style="display:none">
<h2>Step 3</h2>
<p>This is step 3</p>
</div>I'm sure that you can figure it out for yourself from here. The only thing left to do really is making the proper styling for it.
answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
Thanks for your suggestion, it sounds simple.
– Phong Vu
Nov 21 '18 at 12:23
@PeterPham check my updated answer. I'm sure it answers your question and gives you a good idea on how to do this. If my answer helped / answered your question don't forget to accept the answer.
– RamonRobben
Nov 21 '18 at 12:59
my big thank to you. it's simply what I need.
– Phong Vu
Nov 21 '18 at 13:34
add a comment |
What you are looking for are two things.
- Tab Panel of some sort
- How you can toggle a background image.
Both are actually pretty simple to do with jQuery or JavaScript.
Here is an example on how to make something along those lines. I recommend you reading the comments so you have an idea of what is going on.
function toggleTab(element, tabname) {
// Select all tab panels and hide them
var tabPanels = $('.panel');
// Loop through every element and hide it by changing the display to none
for (var i =0; i < tabPanels.length; i++) {
$(tabPanels[i]).css('display', 'none');
}
// Now that we hid everything we can show the user the element that they clicked on.
// We select the panel that has the ID of tabname
$('#' + tabname).css('display', 'block');
// For toggling styling
var tabButtons = $('.button');
for (var i =0; i < tabButtons.length; i++) {
$(tabButtons[i]).removeClass('toggled');
}
$(element).addClass('toggled');
}#buttoncontainer {
display: flex;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 150px;
font-size: 24px;
text-align: center;
line-height: 150px;
cursor: pointer;
background-color: blue;
color: white;
}
.button:hover {
/* Background-color can also be background-image */
background-color: rgb(0, 0, 160);
}
/* This class will only apply to the div of the active tab panel */
.toggled {
/* Background-color can also be background-image */
background-color: lime !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
<div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
<div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
<div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>
<div id="step1" class="panel">
<h2>Step 1</h2>
<p>This is step 1</p>
</div>
<div id="step2" class="panel" style="display:none">
<h2>Step 2</h2>
<p>This is step 2</p>
</div>
<div id="step3" class="panel" style="display:none">
<h2>Step 3</h2>
<p>This is step 3</p>
</div>I'm sure that you can figure it out for yourself from here. The only thing left to do really is making the proper styling for it.
answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
Thanks for your suggestion, it sounds simple.
– Phong Vu
Nov 21 '18 at 12:23
@PeterPham check my updated answer. I'm sure it answers your question and gives you a good idea on how to do this. If my answer helped / answered your question don't forget to accept the answer.
– RamonRobben
Nov 21 '18 at 12:59
my big thank to you. it's simply what I need.
– Phong Vu
Nov 21 '18 at 13:34
add a comment |
What you are looking for are two things.
- Tab Panel of some sort
- How you can toggle a background image.
Both are actually pretty simple to do with jQuery or JavaScript.
Here is an example on how to make something along those lines. I recommend you reading the comments so you have an idea of what is going on.
function toggleTab(element, tabname) {
// Select all tab panels and hide them
var tabPanels = $('.panel');
// Loop through every element and hide it by changing the display to none
for (var i =0; i < tabPanels.length; i++) {
$(tabPanels[i]).css('display', 'none');
}
// Now that we hid everything we can show the user the element that they clicked on.
// We select the panel that has the ID of tabname
$('#' + tabname).css('display', 'block');
// For toggling styling
var tabButtons = $('.button');
for (var i =0; i < tabButtons.length; i++) {
$(tabButtons[i]).removeClass('toggled');
}
$(element).addClass('toggled');
}#buttoncontainer {
display: flex;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 150px;
font-size: 24px;
text-align: center;
line-height: 150px;
cursor: pointer;
background-color: blue;
color: white;
}
.button:hover {
/* Background-color can also be background-image */
background-color: rgb(0, 0, 160);
}
/* This class will only apply to the div of the active tab panel */
.toggled {
/* Background-color can also be background-image */
background-color: lime !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
<div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
<div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
<div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>
<div id="step1" class="panel">
<h2>Step 1</h2>
<p>This is step 1</p>
</div>
<div id="step2" class="panel" style="display:none">
<h2>Step 2</h2>
<p>This is step 2</p>
</div>
<div id="step3" class="panel" style="display:none">
<h2>Step 3</h2>
<p>This is step 3</p>
</div>I'm sure that you can figure it out for yourself from here. The only thing left to do really is making the proper styling for it.
answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
What you are looking for are two things.
- Tab Panel of some sort
- How you can toggle a background image.
Both are actually pretty simple to do with jQuery or JavaScript.
Here is an example on how to make something along those lines. I recommend you reading the comments so you have an idea of what is going on.
function toggleTab(element, tabname) {
// Select all tab panels and hide them
var tabPanels = $('.panel');
// Loop through every element and hide it by changing the display to none
for (var i =0; i < tabPanels.length; i++) {
$(tabPanels[i]).css('display', 'none');
}
// Now that we hid everything we can show the user the element that they clicked on.
// We select the panel that has the ID of tabname
$('#' + tabname).css('display', 'block');
// For toggling styling
var tabButtons = $('.button');
for (var i =0; i < tabButtons.length; i++) {
$(tabButtons[i]).removeClass('toggled');
}
$(element).addClass('toggled');
}#buttoncontainer {
display: flex;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 150px;
font-size: 24px;
text-align: center;
line-height: 150px;
cursor: pointer;
background-color: blue;
color: white;
}
.button:hover {
/* Background-color can also be background-image */
background-color: rgb(0, 0, 160);
}
/* This class will only apply to the div of the active tab panel */
.toggled {
/* Background-color can also be background-image */
background-color: lime !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
<div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
<div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
<div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>
<div id="step1" class="panel">
<h2>Step 1</h2>
<p>This is step 1</p>
</div>
<div id="step2" class="panel" style="display:none">
<h2>Step 2</h2>
<p>This is step 2</p>
</div>
<div id="step3" class="panel" style="display:none">
<h2>Step 3</h2>
<p>This is step 3</p>
</div>I'm sure that you can figure it out for yourself from here. The only thing left to do really is making the proper styling for it.
function toggleTab(element, tabname) {
// Select all tab panels and hide them
var tabPanels = $('.panel');
// Loop through every element and hide it by changing the display to none
for (var i =0; i < tabPanels.length; i++) {
$(tabPanels[i]).css('display', 'none');
}
// Now that we hid everything we can show the user the element that they clicked on.
// We select the panel that has the ID of tabname
$('#' + tabname).css('display', 'block');
// For toggling styling
var tabButtons = $('.button');
for (var i =0; i < tabButtons.length; i++) {
$(tabButtons[i]).removeClass('toggled');
}
$(element).addClass('toggled');
}#buttoncontainer {
display: flex;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 150px;
font-size: 24px;
text-align: center;
line-height: 150px;
cursor: pointer;
background-color: blue;
color: white;
}
.button:hover {
/* Background-color can also be background-image */
background-color: rgb(0, 0, 160);
}
/* This class will only apply to the div of the active tab panel */
.toggled {
/* Background-color can also be background-image */
background-color: lime !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
<div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
<div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
<div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>
<div id="step1" class="panel">
<h2>Step 1</h2>
<p>This is step 1</p>
</div>
<div id="step2" class="panel" style="display:none">
<h2>Step 2</h2>
<p>This is step 2</p>
</div>
<div id="step3" class="panel" style="display:none">
<h2>Step 3</h2>
<p>This is step 3</p>
</div>function toggleTab(element, tabname) {
// Select all tab panels and hide them
var tabPanels = $('.panel');
// Loop through every element and hide it by changing the display to none
for (var i =0; i < tabPanels.length; i++) {
$(tabPanels[i]).css('display', 'none');
}
// Now that we hid everything we can show the user the element that they clicked on.
// We select the panel that has the ID of tabname
$('#' + tabname).css('display', 'block');
// For toggling styling
var tabButtons = $('.button');
for (var i =0; i < tabButtons.length; i++) {
$(tabButtons[i]).removeClass('toggled');
}
$(element).addClass('toggled');
}#buttoncontainer {
display: flex;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 150px;
font-size: 24px;
text-align: center;
line-height: 150px;
cursor: pointer;
background-color: blue;
color: white;
}
.button:hover {
/* Background-color can also be background-image */
background-color: rgb(0, 0, 160);
}
/* This class will only apply to the div of the active tab panel */
.toggled {
/* Background-color can also be background-image */
background-color: lime !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
<div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
<div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
<div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>
<div id="step1" class="panel">
<h2>Step 1</h2>
<p>This is step 1</p>
</div>
<div id="step2" class="panel" style="display:none">
<h2>Step 2</h2>
<p>This is step 2</p>
</div>
<div id="step3" class="panel" style="display:none">
<h2>Step 3</h2>
<p>This is step 3</p>
</div>answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
edited Nov 21 '18 at 12:57
answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
answered Nov 21 '18 at 12:12
RamonRobbenRamonRobben
328316
328316
Thanks for your suggestion, it sounds simple.
– Phong Vu
Nov 21 '18 at 12:23
@PeterPham check my updated answer. I'm sure it answers your question and gives you a good idea on how to do this. If my answer helped / answered your question don't forget to accept the answer.
– RamonRobben
Nov 21 '18 at 12:59
my big thank to you. it's simply what I need.
– Phong Vu
Nov 21 '18 at 13:34
add a comment |
Thanks for your suggestion, it sounds simple.
– Phong Vu
Nov 21 '18 at 12:23
@PeterPham check my updated answer. I'm sure it answers your question and gives you a good idea on how to do this. If my answer helped / answered your question don't forget to accept the answer.
– RamonRobben
Nov 21 '18 at 12:59
my big thank to you. it's simply what I need.
– Phong Vu
Nov 21 '18 at 13:34
Thanks for your suggestion, it sounds simple.
– Phong Vu
Nov 21 '18 at 12:23
Thanks for your suggestion, it sounds simple.
– Phong Vu
Nov 21 '18 at 12:23
@PeterPham check my updated answer. I'm sure it answers your question and gives you a good idea on how to do this. If my answer helped / answered your question don't forget to accept the answer.
– RamonRobben
Nov 21 '18 at 12:59
@PeterPham check my updated answer. I'm sure it answers your question and gives you a good idea on how to do this. If my answer helped / answered your question don't forget to accept the answer.
– RamonRobben
Nov 21 '18 at 12:59
my big thank to you. it's simply what I need.
– Phong Vu
Nov 21 '18 at 13:34
my big thank to you. it's simply what I need.
– Phong Vu
Nov 21 '18 at 13:34
add a comment |
any tabs plugin will allow you to use what you want in the tab selector, just use css to use a background image for them. however this question is way too broad and therefore off topic for SO
– Pete
Nov 21 '18 at 12:07