I'm feeling a bit lost because I can't seem to find any examples or tutorials for vertical or side tabbed content. I want the tabs to be on the left side, but all my searches online have come up empty. Maybe I'm not using the right search terms, or maybe this technique isn't as common as I thought. Either way, I don't want to rely on jQuery UI for this. Can anyone point me in the right direction? I would really appreciate it.
If you don't want to use jQueryUI, you can achieve the same functionality easily and cleanly with the following code snippet (check out the demo here)
Here is the Markup:
<ul id="tabs-titles">
<li class="current"> <!-- default (on page load), first one is currently displayed -->
first
</li>
<li>
second
</li>
<li>
third
</li>
</ul>
<ul id="tabs-contents">
<li>
<div class="content">first content first content first content</div>
</li>
<li>
<div class="content">second content</div>
</li>
<li>
<div class="content">third content</div>
</li>
</ul>
The CSS Styles:
#tabs-titles{
float:left;
margin-right:10px;
}
#tabs-titles li{
cursor:pointer;
}
#tabs-titles li.current{
font-weight:bolder;
}
#tabs-contents{
background:#F2F2F2;
margin-left:100px;
padding:5px;
}
#tabs-contents li{
display:none;
}
#tabs-contents li:first-child{
display:block; /* first one content displayed by default */
}
For the JavaScript part (simple jQuery, no UI):
var tabs = $('#tabs-titles li'); //grab tabs
var contents = $('#tabs-contents li'); //grab contents
tabs.bind('click',function(){
contents.hide(); //hide all contents
tabs.removeClass('current'); //remove 'current' classes
$(contents[$(this).index()]).show(); //show tab content that matches tab title index
$(this).addClass('current'); //add current class on clicked tab title
});
Check out this fantastic resource: Vertical Tabs for jQuery enthusiasts!
I came across a great solution for tabs using pure javascript, no jquery involved:
Although I haven't tested it yet, I also found another interesting option that relies on html5 and css3 instead of jquery:
In my search for the best solution, I discovered that "pure javascript tabs" is a highly effective keyword to use. Give it a try without quotes to explore more options beyond what I've mentioned.
Stumbled upon a great jQuery UI demo
Check out this amazing jQuery UI example demonstrating vertical tabs
Upon inspecting the source code, it appears that they simply applied a class to achieve the vertical positioning effect instead of horizontal placement.
Working on a project using react in conjunction with express.js (within router/user.js) router.get("/", function (req, res) { console.log("this is u" , req.user) console.log(req.isAuthenticated()); if (req.user) { res.json({ user: req.user }) ...
Im pretty new to web programming and im working on a site now. In one part of this site, I have collections of 3 pictures. 1 larger one and two smaller thumbnails below it. The goal is to create a way in which i can click on one of the thumbnails and the ...
Hello there, I'm currently working on a web application and I need to implement some JavaScript code. The application consists of three sections, each with its own title and button. When the button is clicked, a hidden div tag is displayed. Clicking t ...
I'm currently developing an application with speech-to-text commands functionality. I have created a form, but I am looking to manipulate the input elements from outside the form framework. <form id="myform"> <input type="tex ...
<DIV class=x-grid3-scroller id=ext-gen742> <DIV class=x-grid3-body id=ext-gen743> <DIV class=x-grid3-row x-grid3-row-first x-grid3-row-last > <TABLE class=x-grid3-row-table> <TBODY> <TR> <TD> class=x-grid3-col x-g ...
While following g00glen00b's tutorial on meteor/twitter integration (), I encountered a persistent error. Any assistance or clues would be greatly appreciated. Steps I've Taken Uninstall/reinstall npm Uninstall/reinstall twitter package Uninst ...
Currently, I am working on making a Joomla website responsive. However, I have encountered an issue with the SobiPro Map. The problem arises when displaying a map (background img) and points (a link + img) over it with an absolute position. As a result, wh ...
I have a <div> on the page with the CSS class .svgImage applied to it. Whenever I resize the browser window, the svg image resizes correctly but keeps shifting its position on the page. When I make the browser window vertically smaller, the svg imag ...
After receiving a CSV file from a URL, I am converting each row into an array of objects. const translation = { '緯度': 'latitude', '経度': 'longitude', '測定局コード': 'Measuring ...
Is there a way to adjust the size of the outermost svg while keeping the size of the elements inside the svg unchanged? I've searched online but couldn't find a solution to this specific issue. To provide context and avoid the x-y problem, let ...
I am working with an image that contains multiple flag images: https://i.stack.imgur.com/xg0iM.jpg I have a div element with the dimensions: width:100px; height:50px. My goal is to resize each flag to fit inside it: .flag{ wi ...
I am struggling to animate a .alert div within its wrapper to fly up from the bottom of the wrapper by 40px. However, I am encountering difficulty as the alert div does not start at the bottom of the wrapper as intended. The desired behavior is for it to s ...
After reading several posts on similar topics, I have yet to find the specific information I need. Currently, I am working on a web application (utilizing HTML5 and Javascript) that includes a photo-taking feature. I am looking to then save these photos t ...
Looking for a way to download various file types using AJAX. I came up with the idea of sending get requests with the file name as a query string via AJAX, receiving the response as a base64 string, and then converting it into a blob object to be download ...
I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...
Does anyone know of a plugin or code that can display the content of a .nfo file on a webpage (html or php)? I want to create multiple web pages with individual .nfo files, but I'm not sure if this is achievable through coding or if there's a scr ...
I've been experimenting with CSS3 transitions on a website I'm designing, but I've encountered a small problem. Whenever I hover over an element with a CSS3 transition, the text in the previous section blurs momentarily and then returns to ...
Hello everyone, I'm in need of assistance. I have a form on one PHP page and I want to use AJAX to pass the data to another PHP page that will update my database and then return the results. <form name="profile" class="profile"> < ...
I'm working on passing a variable to a controller and then utilizing that variable in another view. In View1.html: var cat = 5; Controller.js: // retrieve the cat=5 variable In View2.html: // also retrieve the cat=5 variable from the controller Vi ...
Recently, I was tasked with investigating an existing website. Currently, the website utilizes a single root html file that contains multiple iframes linking to external html pages. However, the team behind the website has noticed that this setup is causin ...