Dreamweaver and jQuery collaboration for displaying PDFs in a container

I am currently utilizing the jQuery accordion functionality within the latest version of Dreamweaver. My goal is to link a specific PDF with each account so that when an account is selected, the corresponding PDF will open in the designated "content goes here" container.

I am struggling to determine how to establish this connection between the accounts and their associated PDFs. Any assistance on this matter would be greatly appreciated. Thank you.

<!DOCTYPE html>
<html>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
<body>

<div id="container" style="width:700">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">jQuery Test File</h1></div>


<div id="menu" style="background-color:#FFD700;height:278;width:300;float:left;">
  <b>Utilities</b><br> 

<div id="Accordion1">
  <h3><a href="#"> Electric </a></h3>
  <div>    3201 New Mexico AV</br>     
<br>
4200 Wisconsin Ave</br>
<br>
4545 42nd St NW 312 <br>
4545 42nd St 309</br></div>
  <h3><a href="#"> Gas </a></h3>
  <div>Anderson Hall<br>
Asbury Bldg</br>
<br>
Asbury Boiler Distribution <br>
Beeghly Bldg.</div>
  <h3><a href="#">Water</a></h3>
  <div>3500 Nebraska Ave. NW
    <br>
3501 Nebraska Ave. NW<br>
4629 Rockwood Pkwy <br>
4745 Massachusetts Ave</div>
</div>

<script type="text/javascript">
$(function() {
    $( "#Accordion1" ).accordion(); 
});
</script>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"></div>

</div>

<div id="content" style="background-color:#EEEEEE;height:278px;width:400px;float:left;">
Content goes here</div>

</body>
</html>

Answer №1

1) Dreamweaver is a code editor, not related to this.

2) Incorporate an Iframe in your solution.

<a href="myfile.pdf" target="viewframe">3501 Nebraska Ave. NW</a>

<iframe name="viewframe" style="display:block;height:400px;"></iframe>

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

Activate Gulp watch to run task just one time

I have integrated gulp-livereload to automatically refresh pages after modifying .js files. Below is the code snippet: const gulp = require('gulp'); const livereload = require('gulp-livereload'); gulp.task('jsLiveReload', ...

Searching for a different method in JavaScript that can add items without duplication, as the prependTo function tends to insert multiple items

Every time my code runs successfully, a success message is generated and displayed using prependTo within the HTML. However, the issue arises when the user performs the successful action twice, resulting in two success messages being shown on the screen. ...

Is there a way to incorporate the results from a website into my own site using Ajax or a simpler method if Ajax is not an option?

I am currently working on a website that requires access to a large amount of dynamic data. However, I do not have the resources to store this data on my server like many other websites do. Let me illustrate this with an example. Imagine a website called ...

On successful completion of the $.post request, hide a group of div elements with a fade-out

I need help fading out a set of div elements based on the response received from an ajax call. The current code I have doesn't seem to be doing what I intended. Can someone point out where I might be going wrong? $('.view_result').click(fu ...

Transfer vertices into a texture and send it to the shader for processing

Finally found some time to experiment with shaders, but I hit a roadblock. My goal is to pass vertices to a shader and perform general-purpose computing on them. It seems like the gpgpu functionality is working fine because I can see a few pixels being sh ...

Text that appears automatically in an input field

I've searched high and low, but I just can't seem to find a solution that works for me. What I need is a way to automatically populate a HTML text field with default text when the page loads. This default text should ideally be a PHP variable and ...

Encountering an issue where props are receiving a value of undefined within a component that is

After receiving a JSON response from getStaticProps, I double-checked the data by logging it in getStaticProps. The fetch functionality is working smoothly as I am successfully retrieving the expected response from the API. import Layout from '../comp ...

Can an AJAX request continue running even after the user has moved to a different page within the website?

Currently on my website, users are able to submit a form using ajax. The response, indicating whether the form was successfully submitted or if there was an issue, is displayed in an alert message. However, due to the asynchronous nature of this process, i ...

The callback for fs.WriteFile is triggered before the file is written to disk

I am encountering an issue with my express request callback that involves writing a file after calling a callback function. zip.addLocalFolder(`/path/to/folder`, `./`); var data = zip.toBuffer(); fs.writeFile(`path/to/download.zip`,data,function (err) { ...

Activate the display of a subcategory when the class is modified

For the past couple of days, I've been grappling with this issue. Despite my best efforts, being new to javascript may be hindering my progress. My goal is to create a Side Navigation that highlights the current section you are on. Fortunately, I stu ...

Why my attempts to alter numerous CSS elements using JQuery are failing?

Here's the code snippet I'm working with: var showThis = $(this).attr('id'); // div0, div1, div2 etc. $('#' + showThis).attr('style', 'background-color: #063 !important, height: 520px'); I am trying to mo ...

When using node.js with SendGrid to send emails to multiple recipients and adding substitution, a blank value

I encountered an issue when sending emails to multiple recipients using SendGrid. I noticed that the substitution values were blank. Technologies Node.js SendGrid (v2) ==== My Sample Code (Node.js) ==== const SENDGRID_API_KEY = 'KEY' const s ...

I have a question regarding the CSS universal selector

I've been working on developing a website, but I'm having trouble with the universal selector. No matter how many times I try, it just won't work. If you'd like to see an example of what I'm dealing with, check out this link: https ...

Calculating numbers with Math.ceil will result in an increase of 1

After using Math.ceil, one value was rounded up to 50 and the other to 80. However, when I added these two values together, the result unexpectedly turned out to be 131. console.log(Math.ceil(e.currentTarget.clientHeight) // 50 console.log(Math.ceil(e.cu ...

Ways to collaborate on code among multiple projects

What is the most efficient way to share code between a React and Node.js application, both using vanilla JavaScript? Consider this snippet: function slugify(str) { return str.replace(/[^a-z0-9)(\.\-_\s]/gi, ""); } How can I implement t ...

issue with manipulating hidden field on the client side

After some troubleshooting, I discovered an issue with a hidden field in my form. Despite changing the value using JavaScript right before submitting the form, on the server side it appeared to be null or empty. The Request.Form["hidAction"] showed as em ...

The command response.setHeader("Refresh", "0") failed to execute

My webpage needs to be refreshed when the user session has expired or the connection is not active. Despite trying various codes, I have been unsuccessful in achieving this. The last code snippet that I implemented is as follows: if(session.getAttribute(" ...

"Exploring the dynamic duo of CodeIgniter and jQuery Uploadify

After successfully using Codeigniter and jQuery Uploadify for my image gallery on localhost, I encountered an issue when trying to upload it onto the server. Any assistance would be greatly appreciated. Thanks in advance. The error message displayed is: ...

Utilizing Angular 4 alongside ng-sidebar to incorporate the class "right"

Just started using ng-sidebar in my Angular 4 project, but I'm a bit lost on where to place the "ng-sidebar--right" class. Could someone please guide me through this small issue (I'm new to this, so apologies in advance). Here's a snippet of ...

Storing selected checkbox values in an sqlite database using JavaScript

I am working on an ejs form that includes multiple checkboxes for users to select their interests. These selections should be saved to a sqlite Database table. The table is being created with bootstrap: db.exec('CREATE TABLE interests(interest text)& ...