Launching a segment from a different page within a foundation reveal modal

With the goal of displaying a modal that contains content from a section on another page when a link is clicked, I encountered a specific issue. For instance:

<a href="/otherpage" data-reveal-id="myModal" data-reveal-ajax="true">

Click Me For A Modal

The challenge lies in wanting to display only a portion of the page - specifically a section from an accordion dropdown that should be expanded within the modal. For example:

<dl class="accordion accorborder" data-accordion="">
        <dd class="accordion-navigation">
            <a href="#p1">Math Foundations I Sem 1</a>
            <div id="p1" class="content">
                <div class="row">
                    <div class="small-6 columns">
                        <h6>code:</h6>HS-ES-38
                        <h6>Offerings:</h6> xxx
                    </div>
                    <div class="small-6 columns">
                        <h6>Course Materials:</h6>
                        <ul>
                            <li><a href="xxx">Syllabus</a></li>
                            <li><a href="xxx">Course Contract</a></li>
                            <li><a href="xxx">White Board</a></li>
                        </ul>
                    </div>
                </div>
                <p>blah</p>
                <dl class="tabs" data-tab="">
                    <dd class="active"><a href="#p1a">Study Sheets</a></dd>
                    <dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
                    <dd><a href="#p1c">Graded Assignments</a></dd>
                    <dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
                </dl>
                <div class="tabs-content">
                    <div class="content active" id="p1a">
                        <ul>
                            <li><a href="x"> example </a>
                        </ul>
                    </div>

To specify a particular section of the page, could using ID be a solution? Like so:

<a href="/otherpage#XID" data-reveal-id="myModal" data-reveal-ajax="true">

Is there a way to achieve this using this method? If yes, how?

Answer №1

Managed to make it work with Angular Foundation, found more information at this link

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

using an external JavaScript function in the MongoDB shell

In my case, I have JavaScript functions that are stored in a JSON file: functions={} functions.a = function(){ return "returned" } I've come across tutorials suggesting that by importing this JSON file, I should be able to use these ...

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

Winston is set up to only record .info errors and does not save any errors to a file or a MongoDB database

Currently, I am utilizing express-mongoose as my backend framework and winston as my logging tool. However, I have encountered an issue where winston only seems to log info messages and not errors. The logs can be found in server.log https://i.stack.imgur. ...

Attempting to remove certain selected elements by using jQuery

Struggling to grasp how to delete an element using jQuery. Currently working on a prototype shopping list application where adding items is smooth sailing, but removing checked items has become quite the challenge. Any insights or guidance? jQuery(docume ...

How can I adjust the positioning of labels in Semantic UI React?

Has anyone successfully changed the label position from right side to left? I attempted using float: left but it didn't have any effect. import {Radio } from "semantic-ui-react" <Radio label="in progress" toggle /> https://i.sstatic.net/hNGb6. ...

Automatically update data in Angular without the need to refresh the page

One feature of my application involves displaying a table with rows retrieved from a database. The functionality responsible for fetching this data is an AJAX call, implemented as follows: getPosts(): Observable<Posts[]> { return this.http.post ...

Watch as jQuery preloads every select list

There are two select lists, and the second one is dependent on the first. After loading the second list, I want to trigger some alerts. What is the most effective approach to accomplish this using jQuery? Let's say the second list is populated in the ...

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

Transform JSON into an Array and generate a new Array from a collection of Arrays

I'm struggling with generating a table in Angular2 from JSON data because I need to pivot the information, but my usual method doesn't seem to work for this scenario. Below is an excerpt of the JSON data I am working with: [ { "ValueDate" ...

The pagination functionality in the customized React Native list component is malfunctioning

In my customized list component known as TableList, there is a pagination functionality implemented. However, a peculiar behavior occurs when the user interacts with the pagination arrows. Upon clicking either the next or previous arrow for the first time ...

The function onKeyDown is not working properly

I am currently working with a Material-UI Table and have the following code: <Table onKeyDown={event => console.log(event)}> <TableBody> ... </TableBody> </Table> Despite having the onKeyDown event listener set up, I a ...

Determine if JSON data is empty using PHP and AJAX

My current code sends a partner-code to a PHP script and retrieves JSON data. $('a.pComment').on('click', function() { var partnercode = $(this).attr('data-code'); if($.trim(partnercode) != '') { $.post(&a ...

Tips for developing a directive that supplies values for ng-options

I have select elements with the same options throughout the entire app, but they may vary in appearance. For example, selects for a user's birthday (day, month, year). Is it possible to create a directive that can provide values or expressions for ng ...

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Currently, my CSS file contains numerous @font-face tags. Each tag specifies a unique font-family and src URL. @font-face{ font-family: Garamond; src: url('ePrintFonts/pcl_91545.ttf'); } @font-face{ font-family: C ...

CKeditor with Kcfinder

Although I've seen similar topics, none seem to match my exact situation. I recently added CKEditor to my website and wanted to integrate KCFinder as the file manager. Following the instructions on KCFinder's website, I copied the necessary file ...

What is the rationale behind requiring a semicolon specifically for IE11 in this function?

Currently, I am tackling some vuejs code to ensure compatibility with IE 11. Struggling with a persistent expected semicolon error in this particular function: chemicalFilters: function (chemical) { var max = 0; var min = 100; for (var ...

Unable to show the input's value

Need help in taking user input to display calculated values //html <div class="empty"> <h5> Enter Empty Seats </h5> <ion-item> <ion-input placeholder="Enter Number of Empties.." type="number" name="emptySeats" [( ...

How can I transfer data from two queries to Jade using Node.js (Express.js)?

I have a database with two tables - one for storing user information and another for managing friendship connections: setting up a friend list in mysql My goal is to create a profile page using Jade, specifically profile.jade: - each user in users ...

Formik button starts off with enabled state at the beginning

My current setup involves using Formik validation to disable a button if the validation schema is not met, specifically for a phone number input where typing alphabets results in the button being disabled. However, I encountered an issue where initially, ...

Bot in discord.js refuses to exit voice channel

I've been struggling to get my bot to leave the voice channel despite trying multiple methods. Here's what I've attempted in the source code: Discord.VoiceConnection.disconnect(); Although this is the current code, I have also tested: messa ...