"Learn the techniques for toggling the visibility of a separate iframe through a hyperlink

<div class="category-tab" id="navg"><!--category-tab-->
<div class="col-sm-15">
<ul class="nav nav-tabs">

<li class="active" ><a href="link"  data-toggle="tab">name</a></li>
<li ><a href="#link" data-toggle="tab">name</a></li>    <li ><a href="#link" data-toggle="tab">name</a</li>
<li ><a href="#link" data-toggle="tab">name</a></li>
</ul>
</div>
</div>
</div>


<iframe src="" id="a" height="2000" width="1366" frameborder="0" align="right" scrolling="no" ></iframe>
<iframe src="" id="b" height="2000" width="1366" frameborder="0" align="right" scrolling="no" ></iframe>

By clicking on a link inside the <li> tag, I want it to toggle or show/hide the corresponding iframe above. The idea is to connect the iframe with the link clicked.

When a link is clicked and becomes active, I want the associated iframe to load instead of others.

javascriptjquerycsshtml

Answer №1

If you want to toggle the visibility of an iframe, you can utilize jQuery's toggle function. Here is an example code snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a href="#link" onclick="$('iframe#a').toggle()">I'm a toggle-link.</a><br />
<a href="#link" onclick="$('iframe#b').toggle()">I'm another toggle-link.</a><br />

<iframe id="a" src="http://stackoverflow.com"></iframe><br />
<iframe id="b" src="http://www.wikipedia.org"></iframe>

Using .toggle() in this context will change the display property of the iframe to block or none.

Edit:
If you need to show only one iframe at a time after clicking a link, you can hide all iframes and then show the relevant one:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a href="#link" onclick="$('iframe').hide();$('iframe#a').show();">I'm a toggle-link (Stack Overflow).</a><br />
<a href="#link" onclick="$('iframe').hide();$('iframe#b').show();">I'm another toggle-link (Wikipedia).</a><br />
<a href="#link" onclick="$('iframe').hide();$('iframe#c').show();">And another toggle-link (jQuery).</a><br />

<iframe id="a" src="http://stackoverflow.com"></iframe>
<iframe id="b" src="http://www.wikipedia.org" style="display:none"></iframe>
<iframe id="c" src="http://jquery.com" style="display:none"></iframe>

Remember to initially hide the iframes you don't want to be visible by adding style="display:none" to them.

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

Two elements occupy the rest of the vertical space

In the center, there is a div with content inside. I want the top and bottom divs to occupy the remaining space. Similar to this example <div class="container"> <div class="top"> </div> <div class="middle"> C ...

htmlcssflexbox

Swap out a button for another using JavaScript

I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the acti ...

javascripthtmlcss

Tips for personalizing the error message displayed on Webpack's overlay

Is there a way to personalize the error overlay output message in order to hide any references to loaders, as shown in this image: https://i.sstatic.net/ESFVc.png Any suggestions on how to remove the line similar to the one above from the overlay output? ...

javascriptvue.jsnpmwebpack

Setting up the camera for viewing large scale objects in Three.js

I'm currently using Three.js to render a cityscape, but I'm having trouble with the camera settings. It seems that adjusting the near/far settings doesn't allow me to capture the entire scene. When I increase the far plane of the camera, the ...

javascriptthree.js

obtaining data from an HTML input field

I'm struggling to retrieve the value from an HTML input element, and despite my own research, it seems like I have the correct syntax. However, I'm still unable to get it to work, leaving me confused. When I log the value to the console, it appe ...

javascripthtmltypescriptinput

Is HTML unable to display decoded %3C?

Two blocks of code with different input strings yield different results: // This does not change HTML var str = "%3Cdiv%3E"; // <div> var str_dec = decodeURIComponent(str); console.log(str_dec); // Console output is `<div>` document.getEleme ...

javascripthtmldecodeuricomponent

Transmit information to the controller using jQuery in a C# MVC environment

Here is my jQuery script code snippet. The script works perfectly and stores the data array/object in a variable called dataBLL. var dataBLL = []; $('#mytable tr').each(function (i) { dataBLL.push({ id: $(this).find('td:eq(0)').text( ...

javascriptc#jsonajaxasp.net-mvc

Using asynchronous import statements in Vue allows for more efficient loading of components

I am using Vue and have a method in my file called load.js. async function loadTask(x) { return await x; // Some async code } export { loadTask }; In one of my Vue components, I call the method but encounter an issue where the use of await prevents the ...

javascriptvue.jsimportasync-awaitexport

Utilizing Bootstrap 4 to arrange each card in its own row

On small screens, I want Bootstrap to display 1 card per row, 2 cards per row on medium screens, and 3 cards per row on large screens. I'm using <div class="col-sm-12 col-md-6 col-lg-4"> and it's working for medium and large screens, but o ...

htmlcssbootstrap-4

Encountering challenges with managing global variables in my Node.js application

I am facing a problem with global variables in my NodeJs application. The project involves webservices created using the express module. When a client accesses the service, a json object is sent in the request body. I extract all properties from the reques ...

javascriptjsonnode.jsexpress

Tips for adding multiple elements to the DOM at once

Is it possible to efficiently append elements to the DOM all at once? In the code snippet below, I am adding elements to a root element (tr_next) within a loop. $('.abc').each(function(){ //create element code here var tr_next = $("<tr> ...

javascriptjquery

Error encountered: SyntaxError - Missing semicolon before statement in AJAX call while processing JSON data

I am currently in the process of making a cross domain JSONP call utilizing this code snippet: jQuery.ajax({ async: true, url: 'http://mnews.hostoi.com/test.json', dataType: 'jsonp', method: "GET&quo ...

javascriptjqueryajaxjsonjsonp

What is the best way to imitate a DOM in order to effectively test a Vue application with Jest that incorporates Xterm.js?

I've created a Vue component that displays an Xterm.js terminal. Terminal.vue <template> <div id="terminal"></div> </template> <script> import Vue from 'vue'; import { Terminal } from 'xterm/lib/public ...

javascriptvue.jsjestjsvue-test-utilsxtermjs

Using JavaScript with Node.js to wait for a promised array to resolve

I'm encountering an issue with the promised array in my code: I have a function inside a switch statement that loads an array from an API Here is an example: let sorted = [] let limit = 10 async function loadPage(slcLimit) { let i let filter = ...

javascriptnode.jsarraysasync-await

Having trouble positioning the image at the center of the ion-slides

I'm currently working on designing a slide within an ion item. Everything seems to be functioning correctly, however, the image inside the slide is not appearing in the center. <ion-item style="height:45%; padding-left: 0;"> <ion-slides ce ...

htmlcssionic-framework

Avoiding page shifting/browser resizing when the android keyboard appears

This question pertains to an HTML5/Javascript WebApp, rather than a native Android app. Is there a way to stop the browser/the DOM from adjusting my responsive content (which primarily uses vw/vh for sizes) when the android soft keyboard is activated? The ...

javascriptandroidhtml

Using Props with jQuery in React Components: A Comprehensive Guide

I trust you comprehend this straightforward example. I attempted to modify the background color of my HTML element during initial rendering by managing it in a React Component with a touch of jQuery assistance. Here is the code within my React Component ...

javascriptjqueryreactjs

Attempting to utilize the JavascriptExecutor for button testing, however encountering an error message stating 'Unexpected keyword or identifier'

When I look at my code, I see this line: JavascriptExecutor js = (JavascriptExecutor) driver; A red line appears underneath it with the error message Unexpected keyword or identifier I attempted to resolve this by importing org.openqa.selenium.Javascrip ...

javascriptselenium-webdrivertesting

Revamping status and backend systems

Seeking advice on the most effective method to execute a HTTP PUT request within my react application. A Post component is responsible for fetching data from https://jsonplaceholder.typicode.com/posts/1 and displaying it. There's another component na ...

javascriptreactjs

Error message "env: '/bin/flask': No such file or directory" pops up while executing the command "npm run start-backend"

Currently on the hunt for a super basic website template that combines Flask and React. I've been using this repository and carefully following the installation steps laid out https://github.com/Faruqt/React-Flask Working on Windows 10 using git Bas ...

javascriptpythonreactjswindowsflask