CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YellowSmurf
YellowSmurf

Reputation: 227

Make Buttons stay inline-block when toggled

I've got 3 categories acting as buttons for a toggle function. The categories are displayed inline-block and have a width of 30% each. When you click on one of them a paragraph appears underneath, however that causes the other two categories to be displayed underneath that paragraph. I need them to stay in one line though. Here's the fiddle so you can see what I mean. When you click on 'Test1' the 'Test2' is moved underneath the paragraph but I need it to stay where it is.

Any suggestions how to achieve this?

Edit I've got the html structure like this as it makes the layout work for mobile devices where the categories are stacked.

Upvotes: 1

Views: 205

Answers (2)

Gouthamm4G
Gouthamm4G

Reputation: 31

This problem is easily solved by using a flex container. Not only it solves your problem, it is also easy to change for mobile in responsive web design and it is semantically correct.

HTML:

<div class="categories">
    <p id="Category1">Test1</p>
    <p id="Category2">Test2</p>
    <p id="Category3">Test3</p>
</div>

<div id="more1" class="moreCategory">
    <p>Content 1</p>
</div>

<div id="more2" class="moreCategory">
    <p>Content 2</p>
</div>

<div id="more3" class="moreCategory">
    <p>Content 3</p>
</div>

CSS:

.categories {
    display: flex;
    width: 100%; /*Not necessary. Make sure its large enough to be clear*/
    flex-direction: row;
}

.categories p {
    width: 30%;
    margin: 2px;
    padding: 3px;
    text-align: center;
    background-color: #000;
    color: #fff;
}

.moreCategory {
    display: none;
}

For Mobile:

@media (min-width: 600px) {
    .categories {
       flex-direction: column;
    }
    .categories p {
  width: 100%;
    }
}

JQuery:

$('#Category1').click(function() {
    if ($('#more1').is(":hidden")) $('#more1').toggle();
    if (!$('#more2').is(":hidden")) $('#more2').toggle();
    if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category2').click(function() {
    if (!$('#more1').is(":hidden")) $('#more1').toggle();
    if ($('#more2').is(":hidden")) $('#more2').toggle();
    if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category3').click(function() {
    if ($('#more1').is(":hidden")) $('#more1').toggle();
    if (!$('#more2').is(":hidden")) $('#more2').toggle();
    if (!$('#more3').is(":hidden")) $('#more3').toggle();
});

This should solve your problem. JS Fiddle.

EDIT :

If you really want the heading tabs together, but also applicable for mobile you can hide the selecting controller from my for, i.e., the topmost main div.

Hide the header tags for large screens and the same css applies. For mobiles, hide the control div and show the headers and moreContent divs without any JQuery controls. A simple if statement should do the trick(check for screen size or user agent).

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

I've changed your HTML structure, see this fiddle

HTML:

<div class="Categories">
  <p id="Category1">Test1</p>
  <p id="Category2">Test2</p>
 </div>

CSS:

.Categories p {
    width:33%;
    display:inline-block;
}

JS : 

$('#Category1').click(function(){
  $('.moreCategory1').toggle();
});
$('#Category2').click(function(){
  $('.moreCategory2').toggle();
});

Upvotes: 5

Related Questions