How to use CSS and Jquery to show a child element right after its parent element

I'm attempting to develop tabbed navigation using my current HTML structure. My goal is to display book titles as tabs and book details BELOW the tabs. Check out this example:

or view this: http://jsfiddle.net/syahrasi/Us8uc/

I cannot change the HTML structure. I am seeking a pure CSS solution, or alternatively, a combination of CSS and jQuery if necessary.

In my current setup (as shown below), clicking on a "book title" tab causes the next tab to shift horizontally. I am in search of a solution that displays the book content beneath the tabs without causing any horizontal shifting of the subsequent tabs.

What I currently have:

$(document).ready(function() {
    $('.book-content').hide();
});

$('.btn').click(function(e) {
    $('.book-content').hide();
  $(this).closest('.book').find('.book-content').slideToggle('fast');
   e.preventDefault();
});
body{
background-color: grey;
}
.books{
background-color: white;
}
.book{
display: inline-block;
vertical-align: top;
background-color: lightblue;
}
.hide{
display: none;
}
.active{
background-color:#F7778F;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="stackoverflow.css">
</head>
<body>

<div class="books"> BOOKS <br/>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 1</a></div>
<div class="book-content">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>

</div>
<div class="book active">
<div class="book-title"><a href="" class="btn">Book 2</a></div>
<div class="book-content">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 3</a></div>
<div class="book-content hide">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="stackoverflow.js"></script>
</body>
</html>

jqueryhtmlcsstabs

Answer №1

$(document).ready(function() {
    $('.book-content').hide();
});

$('.btn').click(function(e) {
    if(!$(this).closest('.book').find('.book-content:visible').length) 
    {
    $('.book-content').slideUp('fast');
  $(this).closest('.book').find('.book-content').slideDown('fast');
    }
   e.preventDefault();
});
body{
background-color: grey;
}
.books{
background-color: white;
}
.book{
display: inline-block;
vertical-align: top;
background-color: lightblue;
}
.hide{
display: none;
}
.active{
background-color:#F7778F;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Unique Document</title>
<link rel="stylesheet" type="text/css" href="uniquestyles.css">
</head>
<body>

<div class="books"> UNIQUE BOOKS <br/>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 1</a></div>
<div class="book-content">
<div class="book-description">Description Unique text goes here.</div>
<div class="book-author">Author Unique content</div>
</div>

</div>
<div class="book active">
<div class="book-title"><a href="" class="btn">Book 2</a></div>
<div class="book-content">
<div class="book-description">Description Unique text goes here.</div>
<div class="book-author">Author Unique content</div>
</div>
</div>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 3</a></div>
<div class="book-content hide">
<div class="book-description">Description Unique text goes here.</div>
<div class="book-author">Author Unique content</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="uniquecode.js"></script>
</body>
</html>

Answer №2

Here is a solution that can resolve your issue without altering the HTML structure

CSS:

 body{background-color: grey;}
.books{background-color: white !important;}
.book{display: inline-block;vertical-align: top;background-color: lightblue;}
.hide,.book-content{display: none;}
.active{background-color:#F7778F;}
.cls_dsp{position: absolute;left: 8px !important;;}
.cls_ind{z-index:2;position:relative;}

Jquery:

$('.book').removeClass('active');
$(document).on('click','.btn',function() {
$('.btn').parent().next().hide();        
$('.btn').removeClass('active');     
$(this).addClass('active'); 
$(this).parent().css('width',$(this).width());
$(this).parent().next().addClass('active').show();    
$(this).parent().parent().addClass('books cls_dsp');     
$('.book-title').addClass('cls_ind');
if ($(this).parent().parent().prev().get(0).tagName!='BR'){
$(this).parent().parent().removeClass('cls_ind'); 
$(this).parent().css(
'left',$(this).parent().parent().prev().children(1).position().left+
$(this).parent().parent().prev().first().width()+8);  
 $(this).parent().parent().nextAll().removeClass('cls_dsp').addClass('cls_ind');     
 $(this).parent().parent().nextAll().css(
 'left',$(this).parent().position().left+$(this).parent().width()+8)}
 else{ 
 $(this).parent().parent().nextAll().removeClass('cls_dsp').addClass('cls_ind' );         
 $(this).parent().parent().nextAll().css('left',
 $(this).parent().parent().position().left+$(this).parent().width())}
 $(this).parent().parent().nextAll().children(1).css('left','0');  
 $(this).parent().parent().parent().css('height',
 $(this).parent().parent().height()+20+'px')
});

Check out the JSFIddle for a live demo of the solution: http://jsfiddle.net/7m6oz2tv/3/

If you have any suggestions on how to enhance the coding style in the above solution, feel free to share.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the chosen dates in the date range picker tool designed for Twitter Bootstrap

I recently started using the date range picker for Twitter Bootstrap, a creation by Dan Grossman, which you can find here. Upon initialization, I realized that setting pre-defined values like startDate and endDate was possible. However, my question is: Is ...

javascriptjquerytwitter-bootstrapdaterangepicker

Is there a way to make those three elements line up in a row side by side?

I'm working on a layout using HTML and CSS that will display two images on the left and right sides of the browser window, with text in between them. I want them all to be horizontally aligned within a container. Here is the code snippet: <div cla ...

htmlcss

Having trouble with my getJSON function, can't pinpoint the error in my code

After collaborating with some fellow stack users, I have developed the following: http://jsfiddle.net/9ywLq/ I am looking to integrate an external json file in order to achieve something similar to this: http://jsfiddle.net/RCB9M/ Currently, I am linki ...

javascriptjsonjquery

Unable to navigate to specific tab in Laravel 6 navigation tabs using URL parameter (e.g. myweb/pages#tab1)

I'm having trouble navigating to the tabs pages, they only show up in the URL (myweb/pages#tab1 .. myweb/pages/#tab2 ..). Can someone please help me out? View image <div class="card-body"> <ul class="nav nav-tabs" id="myTab" role="tabli ...

htmllaravelbootstrap-4navbar

Issues have been encountered with jQuery on function when it comes to dynamically inserted elements

I have been trying to utilize the .on method for dynamically created elements, but it doesn't seem to be working as expected. I am using a selector though :) $(".metadata").on("click", "i.icon-remove", function () { console.log("what"); $(thi ...

javascriptjquery

Tips for organizing wells within bootstrap into separate columns

Looking for a way to organize my well list into two separate columns. I've included a link to my Plunker project here: https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview. Below is the view section: <div class="well well-lg" ng-repeat="(key, d ...

cssangularjstwitter-bootstrapangular-ui-bootstrap

preventDefault should be used in a way that does not impact its children

Can someone help with a code snippet I have that prevents a click event and slideToggle on a sub navigation, but it's causing issues with the child links within the sub navigation. How can I target only the parent element without affecting the childre ...

jquerypreventdefaultunbind

Incorporate HTML and JavaScript to dynamically show a button when a specified condition evaluates as true and hide the button if the

I need help with a scenario where I want to show a button only when a specific variable reaches a certain value. For instance, if the variable equals 5, the button should be displayed; otherwise, it should be hidden. Here are the two buttons included withi ...

javascripthtmlcssbutton

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

javascriptcss

Tips for showcasing a lineup horizontally with HTML and CSS

I'm currently working on creating a menu using HTML. I've included my links in an unordered list (ul) as shown below. In my CSS, I added a display:inline; property to the links to make them appear side by side like a menu. However, for some reaso ...

htmlcss

What causes the cancel button to add spaces and create a line break in the textarea field?

Whenever I click the "cancel" button, the textarea inexplicably receives 26 spaces before any existing text and a carriage return after it. This issue occurs when the cancel button is styled in the traditional HTML manner: <button type="reset" name="re ...

htmlangularjstextareacancel-button

Dropdown navigation with CSS

It seems like there's a simple oversight on my end... The drop-down menu I created is causing the main navigation bar to expand. You can view the page I'm working on by following this link. The issue occurs with the navigation below the App butto ...

htmlcssdrop-down-menunavigation

What is the process for aligning text with the margin on the left side

Inside a span block, there is an icon: <span><i></i>Text</span> The CSS for the icon is as follows: i { display: inline-block; width: 20px; height: 20px; } When the text inside the span is long, it wraps to the next lin ...

htmlcss

In JavaScript, you can ensure that only either :after or :before is executed, but not both

My html slider is causing me some trouble <div class="range-handle" style="left: 188.276px;">100,000</div> Upon loading the page, I noticed that in Firebug it appears like this https://i.sstatic.net/Rgqvo.png On the actual page, it looks li ...

javascriptcss

Creating an SQL select statement with a three-level expression is a complex task that requires careful planning and

How can I create a SQL select query with 3 levels of expressions and statements? Typically, my website operates on an SQLite database and the search results are displayed using the following SQL query: "SELECT DISTINCT * FROM amz WHERE Title LIKE \" ...

phphtmlsqlsqlitesearch

Utilizing Bootstrap 4 to seamlessly transition the navbar-brand image to overlap on larger screens, and shrink-to-fit on smaller screens

I have a challenge that I'm working on. My goal is to make the navbar-brand image overlap with the navbar without changing its height, as the navbar itself has a fixed height of 80px. The current solution kinda works, but I am facing an issue ...

csstwitter-bootstrapbootstrap-4

Transmit data from an HTML form to PHP using JSON

I am attempting to utilize JavaScript to send POST data. I have the data in an HTML form: <form name="messageact" action=""> <input name="name" type="text" id="username" size="15" /> <input name="massage" type="text" id="usermsg" si ...

javascriptphpjqueryhtmljson

An Ajax call nested within another Ajax call

I've implemented an AJAX request to load my "home" page and "about" page into a designated "container" when a menu link button is clicked on my index.php. Now, I have three links on my "home" page and I want each of these links to open within the same ...

javascriptphpjqueryajaxinclude

Retrieve the values from hidden input fields that share the same name

How do I retrieve values from cName inputs? <form method="post" action=""> <input type="hidden" name="cName" value="test1" /> <input type="submit" name="get" /> </form> <form method="post" action=""> <input type="hi ...

javascriptjquery

Is it recommended to add the identical library to multiple iFrames?

Here's a quick question I have. So, my JSP page has 4 different iFrames and I've included JQuery UI libraries in it: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://c ...

javascriptjqueryhtmljspiframe