0

I created a hyperlink accordion that will be used for a FAQs section of a webpage. I got it working but I need to have a hyperlink within the text of the accordion. Also, I can't seem to modify the web part once I embed my code onto the page..? I want to edit the text color, size, etc. Lastly, I spent hours trying to get the first dropdown to not display when a user navigates to the page...I want them all hidden unless someone clicks it

Below is an image of my webpart:

Image of the webpart

My code is below:

Sorry, for some reason when I paste my html code, it's being run and only showing output and note code so this was the only way I could paste it:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  } );
  </script>
</head>
<body>

<div id="accordion">
  <h3>What’s the City’s living Wage?</h3>
  <div>
    <p> Living Wage On November 10, 2015 City Council passed Resolution 15-2141 which requires prime contractors, awarded general service contracts valued greater than $50,000, and first-tier subcontractors on the contract to pay their employees rendering services on the contract no less than the “living wage” rate. The current living wage rate is $11.71..</p>
  </div>
  <h3>What is Bonfire?</h3>
  <div>
    <p> Bonfire is our solicitation portal. It is where the City of Dallas posts bid and solicitation opportunities. </p>
  </div>
  <h3>How do I reset my password?</h3>
  <div>
    <p> For instructions to reset your Bonfire password click here. </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3> For instructions to fill out an online bid table, click here:</h3>
  <div>
    <p> For instructions to fill out an online bid table, click here </p>
  </div>
</div>


</body>
</html>

enter image description here

Improve this question
8
  • You don't mention, but I assume this is in a Content Edit WebPart (CEWP)?
    – willman
    Commented Jan 31, 2020 at 21:33
  • Yes, it's SharePoint web content edit Webpart. Can I tried including my link in the html code above but it did only displays the url webpage......
    – Noah
    Commented Jan 31, 2020 at 21:35
  • Where do you need a hyperlink? You should be able to put anchor elements <a> in any of those inner <div>s.
    – willman
    Commented Jan 31, 2020 at 21:41
  • I've added another pic to hopefully see which sharepoint web I'm using (2016). When I go into insert, the option for link is greyed out?
    – Noah
    Commented Jan 31, 2020 at 21:41
  • I need the link within the answer to the question. Once a user clicks the accordion question, I need the hyperlink within the text below it
    – Noah
    Commented Jan 31, 2020 at 21:42

1 Answer 1

Reset to default
0

I am only including a snippet of code for brevity, but if I am understanding you correctly, putting a link in your first answer would look something like this: 

<h3>What’s the City’s living Wage?</h3>  <div>   
     <p> Living Wage On November 10, 2015 City Council passed Resolution   
             <a href="https://www.google.com">here is a link to Google in the middle of an answer</a>   
           15-2141 which requires prime contractors, awarded general service contracts valued greater than $50,000, and first-tier subcontractors on the contract to pay their employees rendering services on the contract no less than the “living wage” rate. The current living wage rate is $11.71..</p>  
</div>

For more details on using the anchor <a> tag, see the documentation here.

For more info on using a separate HTML file linked to the webpart, see this guide.

Improve this answer
3
  • and I'm assuming I can modify the url to display as a hyperlink text...?Also, anyway to adjust the text color/size? Sorry, I'm new to SharePoint lol
    – Noah
    Commented Jan 31, 2020 at 21:52
  • Yes, I added a link to the answer to see more details on using the anchor tag. I also added a link to linking the webpart to an HTML file that you can edit separately from the page.
    – willman
    Commented Jan 31, 2020 at 21:57
  • you're a life saver Willman thank you! :)
    – Noah
    Commented Jan 31, 2020 at 21:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.