Overlay jQuery Accordion

Question

Overlay jQuery Accordion

I am currently working on an accordion to display old blog posts. However, when using a tab, the section below either moves or jumps around. I want the tab to lay over the rows below it without affecting their position. I have tried various solutions involving z-index and fixed positions, but none seem to work properly. Here is a snippet of my code:

jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    jQuery('.accordion-section-title').click(function(e) {
        var currentAttrValue = jQuery(this).attr('href');

        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        } else {
            close_accordion_section();

            jQuery(this).addClass('active');
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}

.accordion-section-content {
  background-color: #faf5f2;
}
.termin-header {
  position: absolute;
  left: 15px;
...

javascript jquery html css

Answer 1

Answer №1

A while back, I encountered a similar situation and found that adjusting the z-index worked for me after some trial and error. Another approach could be to initially hide the article using CSS, position it correctly, and then use jQuery to toggle its visibility.

EDIT:

$(document).ready(function(){
    $("image").click(function(){
        $("#articleText").toggle();
    });
});

#image{
  background-color: green;
  width: 80px;
  height: 80px;
  }
#articleText{
  visibility: ;
  }

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="image">this represents an image</div><!-- image or something else, you have images that show an article on click -->
    <div id="articleText">
    This is an article
    </div> <!-- your article -->
  </body>
</html>

Using something along these lines should work, there may have been an issue with the z-index. I came across a helpful link on Google that provides more information about z-index properties, particularly when the position is absolute: https://css-tricks.com/almanac/properties/z/z-index/

Answer 2

A while back, I encountered a similar situation and found that adjusting the z-index worked for me after some trial and error. Another approach could be to initially hide the article using CSS, position it correctly, and then use jQuery to toggle its visibility.

EDIT:

$(document).ready(function(){
    $("image").click(function(){
        $("#articleText").toggle();
    });
});

#image{
  background-color: green;
  width: 80px;
  height: 80px;
  }
#articleText{
  visibility: ;
  }

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="image">this represents an image</div><!-- image or something else, you have images that show an article on click -->
    <div id="articleText">
    This is an article
    </div> <!-- your article -->
  </body>
</html>

Using something along these lines should work, there may have been an issue with the z-index. I came across a helpful link on Google that provides more information about z-index properties, particularly when the position is absolute: https://css-tricks.com/almanac/properties/z/z-index/

Overlay jQuery Accordion

Answer №1

Similar questions

Creating a unique sliding side navigation bar that is specifically centered on the display instead of spanning the entire height of the screen can be achieved using Bootstrap 3 or Materialize

Who is the father of Bootstrap Popover?

Customize default zoom settings with Cascading Style Sheets (CSS)

Utilizing JavaScript and Ajax to Dynamically Assign Variables Based on JSON Responses

Encountered a network error 500 when attempting to access a CodeIgniter controller action through Ajax

I am attempting to create a captivating image for a "jumbotron"

displaying date picker on button click with angular bootstrap ui

Fetching URL from Right Before Logging Out in Angular 2 Application

What is the CSS method for determining the distance from the top of a container to the edge of the window?

What is the process for transforming a Typescript source file into JavaScript?

Compiling Vue.js without the need for a build tool

Leverage jQuery to fetch a large amount of information

Positioned footer without predetermined height

Extracting Query Parameters from a Successful Ajax Call in Javascript

What could be causing my function to output unicode replacement characters instead?

Generate a new row for every value in a C# dropdown either before or after a Pipe character

Redirect user to new page upon successful login using next-auth middleware

Spinning a div using Jquery

Is it important to avoid two-way databinding in Angular 2 when it is not needed?

Innovative guidelines originating from a resource attribute