Revamping the hyperlinks in my collapsible menu extension

Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, it is configured as a table of contents with links to different sections on the same page.

Below is the provided code. Any assistance would be highly appreciated. Thank you. Mike

..................................
<body>
<div class="container">
  <div id="toc-holder" class="toc-holder">
    <a href="#" class="toc-link" id="toc-link"><span>▼</span> Table of Contents</a>
    <ul id="toc" class="toc">
      <li class="toc-h1"><a href="#section1">1. Loomings</a>
        <ul class="toc-sub closed">
          <li><a href="external-page1.html">1.1 Call me Ishmael</a></li>
          <li><a href="external-page2.html">1.2 Circumambulate</a></li>
        </ul>
      </li>
      <li class="toc-h1">
        <a href="#section2">2. The Carpet-Bag</a>
        <ul class="toc-sub closed">
          <li><a href="external-page3.html">2.1 I stuffed a shirt</a></li>
          <li><a href="external-page4.html">2.2 As most young candidates</a></li>
        </ul>
      </li>
      <li class="toc-h1">
        <a href="#section3">3. The Spouter-Inn</a>
        <ul class="toc-sub closed">
          <li><a href="external-page5.html">3.1 Entering that gable-ended</a></li>
          <li><a href="external-page6.html">3.2 But what most puzzled</a></li>
        </ul>
      </li>
      <li class="toc-h1">
        <a href="#section4">4. Counterpane</a>
        <ul class="toc-sub closed">
          <li><a href="external-page7.html">4.1 Upon waking next morning about daylight...</a></li>
          <li><a href="external-page8.html">4.2 My sensations were strange</a></li>
        </ul>
      </li>
      <li class="toc-h1">
        <a href="#section5">5. Breakfast</a>
        <ul class="toc-sub closed">
          <li><a href="external-page9.html" target="_blank">5.1 I quickly followed suit</a></li>
          <li><a href="external-page10.html">5.2 You could pretty plainly tell</a></li>
        </ul>
      </li>
      <li class="toc-h1">
        <a href="#section6">6. The Street</a>
        <ul class="toc-sub closed">
          <li><a href="external-page11.html">6.1 If I had been astonished at first</a></li>
          <li><a href="external-page12.html">6.2 But, besides the Feegeeans</a></li>
        </ul>
      </li>
    </ul>
  </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.fixedTOC.js?v=3.0"></script>
<script>
// call the plugin on the "#toc" element
$('#toc').fixedTOC({
menuOpens: 'click', // or 'mouseenter'
scrollSpeed: 1000,
menuSpeed: 300,
useSubMenus: true,
resetSubMenus: true,
topLinkWorks: true
});
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1965499-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
})();
</script></div>
</body>
........................................

Answer №1

To convert your hrefs in the <a> tags to external links instead of anchors with hashtags, simply make the following changes: See the example below (or visit JSFiddle):

<li><a href="http://jimulle.com">1.1 Call me Ishmael</a></li>

Please note that we are unsure of what the

<script src="js/jquery.fixedTOC.js?v=3.0"></script>
does, so if the above solution does not work for you, kindly provide us with this script.

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

Calculating the total sum of values using a dropdown list as a filter with J

I have successfully implemented a dropdown filter in my jQuery datatable to filter data. However, I am now looking to calculate the sum of all values in the filtered table each time a user selects a value from the dropdown list. How can I achieve this? My ...

How come I'm not receiving an error message when I enter an incorrect email or password?

Whenever I try to log in with the wrong password and email, no error message is displayed. Instead, it simply logs me in and takes me to the main page. Can someone please assist me in implementing an error message display for incorrect login details? imp ...

Encountering a syntax error while utilizing ssp.class.php with Datatables

My datatables class.php is causing an error, displayed below: Error: An SQL error occurred: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version ...

Ways to duplicate the content of a div to the clipboard without the use of flash

Simple question! I have a div identified as #toCopy, along with a button identified as #copy. Can you suggest the most efficient method to copy the content of #toCopy to the clipboard upon clicking #copy? ...

Techniques for transferring data from ng-click to ng-model

In the development of a foreign language dictionary app, I have implemented a filter that utilizes a regular expression to transform each word in the search results into a clickable URL. This enables users to easily navigate through the app and conduct new ...

Struggling to properly interpret the unrefined data from Typeform's webhook

Utilizing the webhook feature of Typeform to convert results to JSON when a user submits the embedded survey is working perfectly when tested with RequestBin. However, after exposing my local app using ngrok with the command ngrok http 3000 and setting t ...

disable any other active toggle in a vue component

Exploring JavaScript and how to accomplish the following tasks Snapshot The issue I am facing is that if I click on a product, and then click on settings, both are open. However, I want only the currently clicked toggle to be open. For instance, if I cl ...

Display a fresh <p> tag when the condition in the if-statement is met

If you are looking for a questionnaire, check out this one. Now, I am interested in creating if-statements using HTML/CSS/jQuery to achieve the following scenario: Initially, only Question 1 will be visible. When the input matches a certain value like X, ...

Having trouble loading HTML content from another file

Here is the code snippet in question: <script> var load = function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="/linker/templates/button.html" ></object>'; } </script> ...

Is it possible to apply varying CSS styles depending on the parent element's class?

Apologies for the poorly worded question, but I am struggling to find the right terms to convey my query. Let me attempt to explain... Is it feasible to apply different css styles based on the classes assigned to the containing element? For example: < ...

An issue has been encountered in NodeJS with a route that begins with a percent sign causing an error

I have a NodeJS server set up with the following backend configuration: app.use(express.static(__dirname)) app.get('/', function(req, res){ res.send('main page here') }); app.get('/*', function(req, res){ res.send(&apos ...

Mismatch in SSL version or cipher for ExpressJS

I am encountering an issue with https in express and I am struggling to comprehend it: Here is the code snippet from my previous project (which functions correctly): index.js: var fs = require('fs'); var http = require('http'); var ...

Require assistance with try-catch statements

I am troubleshooting an issue with a try-catch block in my Protractor test. Take a look at the code snippet below: try { element(by.id('usernameas')).sendKeys(data); } catch(err) { console.log('error occurred'); } To test the ...

The pair of divs with distinct backgrounds

Looking to customize the navigation on my website by creating a separate background for the list links menu and making sure the left part of the navigation with the logo has its own distinct background that extends until the next div. I've experimente ...

Leverage OpenID Connect in Azure Active Directory with authentication code flow

Currently, I am developing an authentication system for a NodeJS and Express web application that requires users to be directed to Microsoft SSO. To achieve this, I am utilizing passport-azure-ad and OpenID Connect. My main query is - Is it mandatory to ...

The justify-content property aligns single-line text horizontally, but its alignment may not be consistent when the text expands over

Seeking a deeper understanding of flexbox alignment, I decided to experiment with aligning content using only flexbox properties. One puzzling observation is how "justify-content" centers items with single lines of text (flex-item-1 and flex-item-5), but n ...

The select2 does not show the selected information

My select2 is not selecting the value when in edit mode. You can view my data here. Upon clicking the edit data button, it should select "settings" as the parent's value, but unfortunately, it's not working. You can see the issue here. Modal Sc ...

The FullCalendar with Datetime forma in +zone falls in the current time frame

I am trying to implement fullcalendar to check if there is an event in the current time and date, but it doesn't seem to be working. Can someone please help me figure out what I'm doing wrong? startdate VARCHAR enddate VARCHAR example format = ...

Tips for displaying a loading spinner during the rendering of a backbone view

I'm looking for some assistance in rendering a Backbone view that contains a large amount of information. Ideally, I would like to incorporate an animation (spinner) while the information is being rendered. Can anyone offer guidance or help with this ...

Sending emails to multiple groups in Opencart can be easily achieved with the

I am interested in customizing Opencart's admin panel to allow for the selection of multiple customer groups when sending emails. However, I am unsure of where and how to make these modifications as I am relatively new to this type of task. ...