What is the best way to generate hyperlinks for hidden content controlled by a show/hide javascript function?

I am interested in creating links to hidden content using a show/hide JavaScript. Within the hidden content, there are three divs containing videos and text that I would like to link to. For example, linking to the "example" div as shown below. The links do not necessarily have to be direct to each div; having a link destination above the div would be even more preferable. I hope my inquiry is clear.

The code I have implemented for the show/hide functionality is working flawlessly. Here is a simplified version of the code:

HTML

<p>***Visible content***
<a href="#" id="example-show" class="showLink" 
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
    <p>***Hidden content***</p>
    <p><a href="#" id="example-hide" class="hideLink" 
    onclick="showHide('example');return false;">Hide this content.</a></p>

CSS

.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666; 
}
a.showLink, a.hideLink 
{
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left; 
}
a.hideLink {
background: transparent url('up.gif') no-repeat left; 
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; 
}

JavaScript

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
javascripthtmlcsshyperlink

Answer №1

Hopefully, I have grasped your query correctly. Refer to the example below for clarification

HTML

$(document).ready(function() {
    $('li').click(function () {
        $('.content:visible').hide(); // conceals the visible content beforehand
        $('.content').eq($(this).index()).show(); // displays the corresponding content
    });
    });
li  {
    display: inline;
    text-transform: uppercase;
    font-family: calibri;
    height: 24px;
}

.content {
    font-size: 60px;
    color: red;
}

.content:not(:first-of-type) {
    display: none; /* Hides all except the first .content div */
}



li a {
    padding: 0 15px 0 15px;
    text-decoration: none;
    line-height: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>

    <li> <a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>

</ul>



<div class="content"> Content One</div>

<div class="content"> Content Two</div>

<div class="content"> Content Three</div>

<div class="content"> Content Four</div>

Note: This compilation is meant to guide you on achieving your goal, so feel free to make necessary modifications to adapt it to your requirements.

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 memcache in conjunction with PHP and Node.js

Can JavaScript objects and PHP associative arrays be shared with memcache? Alternatively, is it necessary to convert the data into a string before sharing them? ...

phpjavascriptnode.jsmemcached

Using Webpack to manage environment variables in Typescript

Having some issues declaring global variables in Typescript with Webpack's DefinePlugin. Seeking assistance to identify what might be going wrong. Implemented an environment variable in my .bash_profile: export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx ...

javascriptreactjstypescriptwebpack

FormData does not transmit full documents to the server

Recently, I've been working on a project that involves uploading multiple files to my server using jQuery Ajax. Here's what I have accomplished so far: <input type="file" id="lab" name="lab[]" size="10" class="filestyle" multiple/> Below ...

javascriptjquery

The scrollbar style mixin in Sass is successfully applied to textareas, but fails to work in other types

I found an example on css-tricks.com that demonstrates a convenient mixin for custom scrollbars: @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { // For Google Chrome &::-webkit-scrollbar { w ...

htmlcsssass

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

As a newcomer to Javascript, I have a couple of questions: 1) How can I retrieve the first 10 rows, the last 3 rows, and the 2 rows in the center using the code var firstTable = $('#aaa table').eq(0); 2) Is there a way to create and assign new ...

javascriptjqueryhtml

Code snippet in webpage body

Hey there, I could really use some assistance: I currently have the following: A) Login.html B) Documentation.html C) Base.html Within the login page, there is a form with fields for User and Password. In Documentation, there are links to various folder ...

javascripthtmlcssinclude

Trouble with AJAX Post Request: Missing JSON Response

Below is the AJAX request I have created: var data = modalDom.find("form").serializeObject(); data["returnJson"] = true; $.ajax({ type: "POST", url: "/companies/edit/", data: data, dataType: "JSON", success: function (result) { ...

javascriptjqueryasp.netajaxasp.net-mvc

Can you explain the process of initiating a script?

Seeking Answers: 1) When it comes to initializing a script, is there specific code placement in the js file or do you need to create initialization code from scratch? 2) What sets jQuery apart from other scripts that require activation - why does jQuery. ...

javascriptjqueryinitialization

Make the <textarea> occupy the entire available space

How can I make a <textarea> occupy all available space within a <td> element? Upon clicking inside the table cell, the <textarea> should display with precisely the same dimensions as the cell itself, resembling an Excel spreadsheet. I h ...

htmlcss

Pass data from Action Class to ajax using JSON syntax

Currently I am facing an issue while working on fullCalendar, a jQuery plugin. I am trying to populate event details from a database when the Calendar page loads, but I seem to be stuck with a silly problem that I can't figure out. $('#calendar& ...

javascriptjqueryjsonajaxfullcalendar

Sorting objects with Javascript

users[usernames] = { userName : username, userId : id, userStatuINT : statu, userMobilemi : mobile, }; Console log : console log(JSON stringify(data)); Output : { "Guest-77": {"userName":"Jack","userId": ...

javascriptjsonsortingobject

The dropdown menu in Bootstrap 4 has non-functional links

Attempting to create a mega menu using Bootstrap. Started with dropdown menu code and made some modifications, but encountering issues where the links in the dropdown don't work properly unless opened in a new tab. When clicking on a link, it closes t ...

htmlcssdrop-down-menubootstrap-4

"Strategically placing elements on an HTML grid

My current project involves creating a grid layout in HTML using CSS. The goal is to use this layout for various elements such as images, text, and links. What I envision is a visually appealing grid where each object fits together seamlessly with no gaps ...

javascriptjqueryhtmlcss

Leveraging mongorestore for efficiently populating a temporary collection with numerous documents

I am working with an array of objects. const arr = [ { name: 'somename', age: 25, }, { name: 'othername', age: 15, }, ] After successfully updating my collection with the above array: MyCollection.insertMany(a ...

javascriptnode.jsjsonmongodbbson

Transform the C# DateTime to LocalTime on the client side using JavaScript

Utilizing the Yahoo API on my server to retrieve currency information can be done through this link: Yahoo Currency API This API provides me with both a Date and a Time, which I'd like to combine into a single DateTime object. This will allow me to e ...

javascriptc#datetime

Using Ajax.ActionLink to pass a parameter in JavaScript

When I call a controller in this manner: @Ajax.ActionLink("Clients", "ClientAccountsPartialView", new { entityCode = -1, taxNumber = -1, country = 1, ...

javascriptc#asp.netasp.net-mvc-4

Is it possible to utilize a pre-existing JS "package" with Node.JS?

Recently, I decided to convert my existing JS code into an NPM package for easier distribution. The package is called "my-pkg" and includes the following files: my-pkg.js package.json my-pkg.js function ping() { console.log("Hi!"); } package.json ...

javascriptnode.jsnpm

The HTML was generated without any styling properties assigned

After running my script on a galaxy tab, I encountered a strange issue. I created an HTML element (div) and attempted to access the style attribute, only to receive an error message indicating that style is null. Below is the code snippet: var newDiv = d ...

javascriptandroidhtml

Setting React's PUBLIC_URL dynamically at runtime can be accomplished by manipulating the process.env.PUBLIC

I'm currently working on a new CRA project that will be utilized on a website hosting multiple plugins within an "iframe". These plugins are served using a proxy, and the plugin URLs are unknown until they are instantiated. To retrieve the location o ...

javascriptreactjsurlwebpack

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

htmlcss