Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on www.vodafone.co.uk, but without redirecting users to different pages.

My initial thought was that JavaScript would be necessary for this functionality. However, upon closer inspection of www.vodafone.co.uk, I noticed that they achieve this using only HTML and CSS, although clicking on either tab does lead to a new page - something my client wants to avoid. Is there an approach to implement two tabs that reveal different content lists when clicked without disrupting the rest of the page?

Any insights or tips on how to achieve this would be greatly appreciated.

Thank you in advance,

Ead

javascripthtmlcsstabstogglebutton

Answer №1

Allow me to illustrate the basic concept:

html:

<input type="button" id="btnSwitch" value="Switch tabs" />
<div class="tab tab1 visible">I'm tab 1</div>
<div class="tab tab2">And I am tab 2</div>

css:

.tab{display:none;height:200px;width:200px;border:solid 1px red;}
.tab.tab2{border:solid 1px blue;}
.tab.visible{display:block;}

javascript (jQuery is recommended for better readability):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#btnSwitch').click(function(){ $('.tab').toggleClass('visible') });
});
</script>

Fiddle can be found here: http://jsfiddle.net/MFfwV/

I hope this explanation is useful.

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

Building a contact form in Angular and sending emails with Nodemailer

Currently, I am in the process of setting up a contact form for my website. Since I am utilizing a MEAN stack, it made sense to incorporate the nodemailer module for sending emails. In order to handle this functionality, I have established an endpoint &ap ...

javascriptangularjsnode.jsexpressnodemailer

Storing a JSON object within a data attribute in HTML using jQuery

In my HTML tag, I am storing data using the data- method like this: <td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td> When retrieving the data in a callback, I use: $(this) ...

jqueryhtmljson

Ajax UpdateProgress not functional

How can I resolve the issue where my AJAX UpdateProgress bar in ASP.NET is not running when executing a query in the correct format upon button click? Any solutions or help would be greatly appreciated. <html xmlns="http://www.w3.org/1999/xhtml"> ...

javascriptasp.netajax

The Nextjs application folder does not contain the getStaticPaths method

I encountered a problem with the latest nextjs app router when I tried to utilize SSG pages for my stapi blog, but kept receiving this error during the build process app/blog/[slug]/page.tsx Type error: Page "app/blog/[slug]/page.tsx" does not m ...

javascriptreactjstypescriptnext.js

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

htmlcss

transitioning from font-awesome v4 to the latest version, v5

For a while now, I have been utilizing a responsive template. However, I am interested in updating its fa-module from v4 to v5. By downloading the free web package, replacing "font-awesome.min.css" with "all.min.css", and adjusting all references to the ...

htmlcssclassfont-awesomeresponsive

Error: The property 'open' is not defined in the mdMenu object

Encountered a bug while working with angular-material design... When using md-menu, if a sub menu item is opened (as shown in the image) and then hovering over a non-subMenu item (menu item), it throws an error "Cannot read property 'open' of nul ...

javascriptangularjsangular-materialmean-stack

Setting up a custom global variable in nuxt.js using vuetify

As I work on developing my app with Nuxt, I find myself frustrated by the need to constantly write an if statement in my pages using this.$Vuetify.breakpoint.name == 'xs' for handling responsiveness. Instead, I want to create my own variable for ...

javascriptvue.jsnuxt.jsvuetify.js

What is the best way to display a component based on a certain condition?

There are two instances where the Items component needs to be displayed. However, in one instance an additional component, Filters, is required while in another it is not. The Filters component is nested inside Items. When attempting to implement this, ...

javascriptnode.jsreactjsecmascript-6

Utilizing Global Variables and Passing Values in Ionic 3

It seems like my issue is rather straightforward, but there is definitely something eluding me. After logging in, I need to store a TOKEN for HTTP requests in a global variable. Upon successful login, the HTTP get method returns an object with the HTTP co ...

javascriptangularhttptypescriptionic3

Using AngularJS and ChartJS together for stellar data visualization

I need help displaying the canvas element within custom angular directives. Being new to AngularJS, I am in search of a demo or idea regarding Chart.js integration with AngularJS. Important: I specifically require a custom directive for chart display. T ...

angularjshtmlchart.js

Avoiding the "urls" format using the onBeforeRequest function

chrome.webRequest.onBeforeRequest.addListener(function(details) { if (localStorage.on == '1') { return {cancel:true}; } }, {urls: ["*://*.domain1.net/*","*://*.domain2.com/*","*://*.domain3.com/*"], types: ["script","xmlhttpreques ...

javascriptgoogle-chrome-extension

Maintain course focus when updating

I'm currently working on a to-do list where clicking on an item adds the "checked" class. However, when I refresh the page, everything reverts back to its original state without the checked class. How can I maintain the state of the checked items? I& ...

javascriptphphtml

How can I determine the width of a Bootstrap Column on a smartphone?

Currently, I am utilizing Photoshop to design a sequence of Wireframes for a forthcoming eCommerce website. I have a solid grasp on Bootstrap functioning based on a '12 column' structure, where the width of each column varies depending on the vi ...

htmlcsstwitter-bootstrapbootstrap-4

The $postLink() method in the controller is encountering a null value for this.$scope

class pageController { constructor($scope, MyEditableGrid) { this.$scope = $scope; this.MyEditableGrid = MyEditableGrid; this.myEditableGrid = { appScope: this.$scope, ..... } } $postLink ...

javascriptangularjs

Iteratively traverse the object to establish connections between parent and child elements

I've been working on creating a recursive function with some guidance I received here: looping through an object (tree) recursively The goal is to traverse the object 'o' and generate a new one where each key is associated with its parents ...

javascriptjsonrecursion

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

Ways to engage with a fixed html page generated by an Express router?

Let me start by mentioning that I am relatively new to working with NodeJs. Currently, I am dealing with a situation where I need to render a static HTML web page (which includes JavaScript code) as a response to a post request. Below is the relevant snipp ...

javascriptnode.jsexpressnodes

A guide on invoking a JavaScript function within a dropdown menu based on selection instead of change event

I need to automatically trigger a JavaScript function based on the value pulled from the dropdown options that are populated by a database. Currently, the JavaScript function only runs when I manually select an option on the front-end. Below is my code. I ...

javascriptphp

What could be causing the background image on my element to not update?

I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...

javascriptjqueryhtmlcss