The slideUp and slideDown functions are not functioning properly

Whenever a user clicks on image-exp, I want description-exp to slide down while other description-exp slides up.

I am currently using a Bootstrap template available at this link.

To demonstrate the issue, I created a JSFiddle that can be accessed here. However, I am unsure about the root cause of the problem...

Any suggestions or ideas?

Below is the code snippet:

<div class="col-md-3 wrap-image-exp" id="kaiman">
    <div class="image-exp">
        <img src="./img/kaiman.png" class="img-responsive logo-
        experiences" alt="Kaiman">
        <h3 class="logo-kaiman">Title</h3>
        <h6 class="logo-kaiman">small text</h6>
    </div>
</div>

<div class="col-xs-12 description-exp">
    <h4>KEYWORDS: Bootstrap3, HTML5, CSS3, WordPress</h4>
        <p><u>Kaiman</u> is the merging of a communication consulting agency and an ESN. It brings together several departments 
            (K-Up, K-Service, and K-Communication) providing a wide range 
            of solutions to its clients.
        </p>
</div>

CSS Styles:

.description-exp{
    background: #F2F2F2;
    padding: 20px;
    border: solid 3px #223645;
    border-radius: 3px;
    display: none;
}
jquerycsstwitter-bootstrap

Answer №1

While this solution may not directly address your issue, you might want to explore using Bootstrap's "collapse" feature as it seems to be well-suited for your scenario.

Check out this link for more information You can also visit this page for additional details

Answer №2

When using $.siblings() to define currentContent, all elements with .description-exp are retrieved. You actually only want the one that follows the .image-exp you click on - for this, you can utilize $.next() to specifically target that element.

    $(document).ready(function() {
        $('.image-exp').click(function () {
        //$(this).addClass('active-description-exp');

        var currentContent = $(this).next('.description-exp');
        $('.description-exp').not(currentContent).slideUp();
        currentContent.slideToggle();
    });
    });
.image-exp{
  background: red;
}

.description-exp{
    background: #F2F2F2;
    padding: 20px;
    border: solid 3px #223645;
    border-radius: 3px;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-exp">
    <h3 class="logo-kaiman">KAIMAN</h3>
    <h6 class="logo-kaiman">Intégrateur</h6>
</div>
                
 <div class="description-exp">
  <p>est la fusion d'une agence de conseil en communication et d'une       ESN. Elle rassemble plusieurs pôles (K-Up, K-Service et K-Communication) et offre ainsi un éventail de solutions à ses clients.</p>
</div>

<div class="image-exp">
    <h3 class="logo-kaiman">KAIMAN</h3>
    <h6 class="logo-kaiman">Intégrateur</h6>
</div>
                
 <div class="description-exp">
  <p>est la fusion d'une agence de conseil en communication et d'une       ESN. Elle rassemble plusieurs pôles (K-Up, K-Service et K-Communication) et offre ainsi un éventail de solutions à ses clients.</p>
</div>

<div class="image-exp">
    <h3 class="logo-kaiman">KAIMAN</h3>
    <h6 class="logo-kaiman">Intégrateur</h6>
</div>
                
 <div class="description-exp">
  <p>est la fusion d'une agence de conseil en communication et d'une       ESN. Elle rassemble plusieurs pôles (K-Up, K-Service et K-Communication) et offre ainsi un éventail de solutions à ses clients.</p>
</div>

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

Preserving distance between absolute elements

I'm facing an issue with my menu animation using jQuery. In order to achieve the desired effect, I am forced to use position: absolute. My challenge is maintaining consistent spacing between each text string, especially since they vary in width. Unfor ...

jquerycssanimation

Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

I'm working on developing a scroll feature that operates independently from the main window's scrolling function. I aim to trigger specific events in the primary window based on interactions with this separate scrollbar. The only solution I coul ...

javascriptjqueryhtmlcssd3.js

Trying to align two divs side by side with the first one floating left and the second one fixed in position? Unfortunately

Here is an example that I have: https://jsfiddle.net/2z2ksLy4/ HTML: <div class="one"> test </div> <div class="two"> test2 </div> CSS: .one{ width:400px; border:1px solid red; min-height: 200px; float:left; display: ...

htmlcss

CSS 3 - Apply transition to the 'display' property

I have a question about using the transition effect in conjunction with the display property: Currently, I am testing on Safari. input.input_field { display:none; transition-property: display; transition-duration: 2s; -webkit-transition-p ...

htmlcsssafaritransition

Ways to confirm the existence of a specific attribute within a selection

In this HTML select element: <select id="select-filter-item" data-hasqtip="true" title="" aria-describedby="qtip-3"> <optgroup label="Servizi" type="services-group"> <option type="provider">Tutti i trattamenti</o ...

jqueryhtml

The final element that fractures all its sibling elements positioned absolutely

I am experiencing an issue with a container div that contains 5 absolutely positioned images. When I specify the last image as absolutely positioned, all other images lose their positioning and stack at the top. The container itself is relatively position ...

htmlcss

Stylish Titles with Bootstrap

I have been trying to eliminate the border that is creating the panels Body, but I am encountering some difficulties in locating it. Here is the code snippet for my panel: <div class="panel"> <div class="panel-heading"> <span class ...

htmlcsstwitter-bootstrap

The parent element of a 3D div is causing issues with hovering and clicking on the child elements

In my scenario, the parent div is transformed in 3D with rotation, causing it to move to the backside. The issue arises with the child div containing a button that becomes unclickable due to the parent div position. Setting backface-visibility to hidden al ...

javascriptphpjqueryhtmlcss

Enhance Your Button with CSS3 Animation

While experimenting with CSS3 animations, I encountered a challenge when trying to apply an animation to a button upon clicking. The desired effect was for the button to zoom in, spin, and then zoom out, giving the appearance of flying off the screen. Surp ...

jqueryhtmlcss

reverse the effects of a jQuery animation

In my animation project, I implemented a feature where 4 divs slide "behind" another div. However, I now require a reset button that will display all the divs again. My initial approach was to undo the animation by simply reversing it. For example, if I an ...

jqueryjquery-animatez-index

Is there a way to center a div vertically without specifying the screen height?

Trying to create a slider that aligns both horizontally and vertically can be a tricky task. To achieve this alignment, I have implemented the use of display: flex; within the following code: body { display: flex; flex-direction: column; justify-c ...

htmlcssflexboxpositioning

How can I ensure that PrimeNG is functioning properly?

I'm encountering some difficulties setting up PrimeNG correctly to utilize its rich text editor. Despite installing all the necessary components, it's still not functioning as expected. https://i.stack.imgur.com/4kdGf.png This is my package.jso ...

htmljsontwitter-bootstrapangulartypescript

Creating a progress bar that includes hyperlinks: A step-by-step guide

Currently, I am in the process of developing an application form that consists of 9 pages of questions. Initially, I had implemented a progress bar which indicated completion by filling up 1/9 for each page completed. However, I have been informed that thi ...

htmlcssprogress-bar

The method window.getComputedStyle retrieves the CSS max-height property containing an unresolved calc() function

Has anyone encountered a challenge with a function related to Angular in their project? Here is a snippet of the code causing issues: console.log(window.getComputedStyle(this.frontLayer.nativeElement).maxHeight); And within the component template: <di ...

javascriptcssangular

Having trouble getting the jQuery autocomplete feature to work on textboxes that are generated dynamically

I've encountered an issue with implementing autocomplete on dynamically generated textboxes. Despite searching online, I haven't been able to find a suitable solution yet. Below is what I have tried so far: JQUERY: function bindAutoComplete(cla ...

jqueryajaxjson

Tips for pre-setting a select field using jQuery when the page loads

Recently, I enlisted the help of a developer to create some code in my WordPress footer.php file that would predefault a set of fields based on the user's profile. While the text fields default correctly, the select option for gender does not default ...

phpjquerywordpress

Div content with a unique angle

I need to create a website with slanted div elements that must meet the following criteria: The sections should have a height of approximately 400px when displayed side by side, and about 800px when they stack vertically. It would be ideal if this could ...

htmlcssrotation

What is the best way to use jQuery to increment the number in an input field by a specific value?

My goal is to utilize jQuery to increment a number in an input field and then display the updated value in the same input field. The specific id of this input field is "total". Here's my attempt so far: function addBag(){ var bagprice = 79.99; ...

javascriptjqueryhtml

Inquiries regarding the formatting of HTML tables

image description hereI'm facing an issue with displaying a table in HTML. I've been struggling for three days to find a solution, asked multiple questions without success. Any help would be greatly appreciated. I am trying to use the table tag a ...

htmlcssfrontendthymeleaf

A serene web service that delivers XML data

I'm currently trying to navigate a restful webservice that responds with xml data. I'm fairly new to working with restful web services, so I'm feeling a bit lost on what steps to take next. From what I understand, it seems like the issue lie ...

jqueryxmljsonrest