diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx
index a509870ce6520..b2d08b058dae0 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx
@@ -227,6 +227,13 @@ describe('<IndexDetailsPage />', () => {
     expect(header).toEqual(testIndexName);
   });
 
+  it('changes the tab when its header is clicked', async () => {
+    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Mappings);
+    expect(testBed.exists('indexDetailsMappingsCodeBlock')).toBe(true);
+    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Settings);
+    expect(testBed.exists('indexDetailsSettingsCodeBlock')).toBe(true);
+  });
+
   describe('Overview tab', () => {
     it('updates the breadcrumbs to index details overview', async () => {
       expect(breadcrumbService.setBreadcrumbs).toHaveBeenLastCalledWith(
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
index 52572faea21ad..a9ef0e5b24454 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
@@ -6,12 +6,12 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState, FunctionComponent } from 'react';
-import qs from 'query-string';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiPageTemplate, EuiText, EuiCode } from '@elastic/eui';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 
+import { resetIndexUrlParams } from './reset_index_url_params';
 import {
   IndexDetailsSection,
   IndexDetailsTabId,
@@ -35,10 +35,7 @@ export const DetailsPage: FunctionComponent<
   const [index, setIndex] = useState<Index | null>();
 
   const navigateToIndicesList = useCallback(() => {
-    const indicesListParams = qs.parse(search);
-    delete indicesListParams.indexName;
-    delete indicesListParams.tab;
-    const paramsString = qs.stringify(indicesListParams);
+    const paramsString = resetIndexUrlParams(search);
     history.push(`/${Section.Indices}${paramsString ? '?' : ''}${paramsString}`);
   }, [history, search]);
 
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
index 447c3ff330bac..672d193647c1d 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_content.tsx
@@ -17,6 +17,7 @@ import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { RouteComponentProps } from 'react-router-dom';
 
+import { resetIndexUrlParams } from './reset_index_url_params';
 import { renderBadges } from '../../../../lib/render_badges';
 import { Index } from '../../../../../../common';
 import {
@@ -113,7 +114,7 @@ export const DetailsPageContent: FunctionComponent<Props> = ({
 
   const onSectionChange = useCallback(
     (newSection: IndexDetailsTabId) => {
-      return history.push(getIndexDetailsLink(index.name, search, newSection));
+      return history.push(getIndexDetailsLink(index.name, resetIndexUrlParams(search), newSection));
     },
     [history, index.name, search]
   );
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/reset_index_url_params.ts b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/reset_index_url_params.ts
new file mode 100644
index 0000000000000..193a8aecc4b2a
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/reset_index_url_params.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import qs from 'query-string';
+
+export const resetIndexUrlParams = (search: string): string => {
+  const indicesListParams = qs.parse(search);
+  delete indicesListParams.indexName;
+  delete indicesListParams.tab;
+  return qs.stringify(indicesListParams);
+};