What is the method for switching between active tabs?

Do you mean an accordion navigation that opens on the first click and closes on the second click?

If you want to see a demo, here is the link: 

http://codepen.io/cowardguy/pen/dGKEjy

You can check out the above link for a visual reference.

$("ul.otel-filtre-fiyat-tab li").click(function(){
        /* 
            $(this).parents(".otel-tekli-listeleme").find(".otel-full-detay").slideToggle(); 
        */
        var number = $(this).index();
        $("ul.otel-filtre-fiyat-tab li").removeClass("tab-aktif-hover");
        $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").hide().eq(number).slideDown("fast");
        $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).addClass("tab-aktif-hover");
        return false;
    });

You can click on the highlighted area.

https://i.sstatic.net/ata7E.png

javascriptjquerycsstabs

Answer №1

The issue lies within this particular line of code:

$(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").hide().eq(number).slideDown("fast");

To address this, I made some changes by replacing the hide method with slideToggle:

$(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").eq(number).slideToggle("fast");

I also modified the final line of code like so:

$(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).toggleClass("tab-aktif-hover");

This adjustment ensures that the border color will be removed when the tab is closed. Additionally, the line containing removeClass should be omitted. The revised implementation appears below:

$("ul.otel-filtre-fiyat-tab li").click(function(){
    var number = $(this).index();

    $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").not(':eq(' + number + ')').slideUp("fast");
    $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").not(':eq(' + number + ')').removeClass("tab-aktif-hover");

    $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").eq(number).slideToggle("fast");
    $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).toggleClass("tab-aktif-hover");
    return false;
});

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

Utilizing a JQuery plugin in WordPress: A beginner's guide

I have been attempting to utilize a jquery-plugin on a WordPress site, specifically on a single page. I have been following the instructions on this GitHub repository: https://github.com/almightynay/jQuery-Sakura However, despite my efforts, it seems like ...

javascriptphpjquerywordpress

Having trouble with AngularJS and NodeJS routing integration?

After deciding to dive into the world of application development using the MEAN Stack, I encountered a major roadblock. For the past hour, I've been struggling to set up a basic route, only to face failure at every turn. Whenever I try to access my ...

javascriptangularjsnode.jsexpress

Is jquery.validate showing errors more than once?

For my testing program, I utilize the jquery.validate plugin to validate user input fields. Here is how it's set up: <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery-form-3.51.min.js"></script> <script ...

javascriptjqueryajaxjquery-validatejquery-forms-plugin

arranging data in html table columns using angular 2

I am facing a challenge where I require each column of a table to be sorted in ascending order every time it is clicked. The sorting logic implemented is a standard JavaScript method. While this method works well in most scenarios, it encounters issues whe ...

javascriptangularsorting

The feature for favoriting or unfavorite a post is currently not functioning correctly on the frontend (react) side

I have been working on a social media website project for practice, and I successfully implemented the liking and disliking posts feature. However, I encountered an issue where when I like a post and the icon changes to a filled icon, upon refreshing the p ...

javascriptnode.jsreactjsmongodbexpress

Using the Object.assign technique will modify the original object's properties in JavaScript

Recently delving into ReactJS, I stumbled upon an interesting revelation regarding the Object.assign() method: const B = { k1: 'b', k2: 'bb', treedata: [{ children: ['g'] }] } var A = Object.assign( ...

javascriptreactjs

Retrieving a numerical value from a constantly changing string

The string is constantly changing. For example: Date15:Month8:Year1990 Is there a way to extract the number 15 without using substring, since the values are always different? I am looking to extract only the number after "Date" and before ":". ...

javascriptnode.js

how to implement a delay in closing a window using JavaScript

I am currently developing a Google Chrome extension and I want to express my gratitude to everyone here for tolerating my sometimes silly questions. The functionality of the extension is quite basic but it works smoothly. However, I am facing an issue wher ...

javascripttimersetinterval

Having an issue with a cropped CSS box?

I have created a CSS box with a red background color, but for some reason the bottom left corner is being cut off. Can you provide an explanation for this issue? (Refer to the image below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jquerycss

Using Next Js for Google authentication with Strapi CMS

Recently, I've been working on implementing Google authentication in my Next.js and Strapi application. However, every time I attempt to do so, I encounter the following error: Error: This action with HTTP GET is not supported by NextAuth.js. The i ...

javascriptnext.jsgoogle-oauthstrapinext-auth

Does the modularization of code impact the performance of the react-app?

The client provided me with a React app that includes an index.jsx file where 90% of the coding has been completed. To prevent getting stuck in Scroll Limbo, I have started breaking down the code into modules for each specific requirement. These include ...

javascriptreactjs

I'm having trouble getting my button to float correctly on the right side

Here I am facing a unique situation where I am attempting to align my button input[type="submit"] to the right side. I have allocated space for it and therefore trying to float the button to the right so that it can be positioned next to my input text. U ...

htmlcss

What is the best way to pass multiple variables to a PHP file with AJAX using a GET request?

Can you help me figure out how to send both an I.D. value and a name value to a php file using ajax? Currently, I am successfully sending just the I.D. variable, however, when I attempt to add the name variable, the function stops working. The code that w ...

javascriptphpajax

When attempting to insert the "$binary" key into MongoDB using Node.js, an error occurs stating that the key must not begin with a "$" symbol

When utilizing the node driver to insert records into mongo, I encountered an issue with a certain field in my collection: { "$binary": "base64 encoded binary" }. If I directly input a key beginning with $, it triggers an error: Error: key $binary must no ...

javascriptnode.jsmongodb

Problem with overlapping content and navigation side bar in Bootstrap 4

Working on a project for my university, I utilized Bootstrap-4 to create various divisions - header, content-top-fat, content-bot-fat, and main-content. I aimed to fix the positioning of the header, content sections, and footer while allowing only the main ...

csstwitter-bootstrapbootstrap-4

Using jQuery to display handlebar helpers

I am working on inserting a code snippet into my main template (using handlebars) with the help of jquery. var addSnippet = function(data){ return ` <div class='some class'> {{{formatDate ${data.created_at} 'MMM DD ...

jquerynode.jsexpresshandlebars.js

Combining Jquery scripts for seamless integration

I am facing an issue while trying to execute two different jQuery scripts simultaneously - one named balancedgallery and the other museum. Individually, each script works perfectly fine. However, when running them together, the balancedgallery script seems ...

javascripthtmljquerycss

Exciting features of Fancybox 2 with dynamic content

I'm having trouble with retrieving the HTML of the adjacent element when it is clicked and displaying it in a fancybox. Here is the HTML code: <a href="#" class="no-republish">Republish</a> <p class="no-republish-message">Please tr ...

jqueryfancybox-2

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

<p class="site-description">Eating cookies is <span class="description-addition"></span>a delight</p> <script> var phrases = new Array('a sweet experience', 'so delicious', 'the best treat', ...

javascriptjqueryhtml

Steps for running a TypeScript project as a child process within a JavaScript project

I am facing an issue with integrating my Electron app, written mainly in JavaScript, with an Express server project built in TypeScript. When I attempt to create a child process of the TypeScript project within my electron.js file, I encounter TypeScript e ...

javascripttypescriptexpresselectrontsconfig