Dismiss click

In this example below you will see how to do a Dismiss click with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ourpathway, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ourpathway ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dismiss click</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdn.pathwaysupport.org/dev/styles/style.css'>
<link rel='stylesheet prefetch' href='https://cdn.pathwaysupport.org/pw/styles/style-pw.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div id="consent_blackbar"></div>
  <header id="nav-header">
          <div id="nav-wrap">
              <div id="nav-top">
                  <a class="nav-logo" href="//byupathway.lds.org">
  <svg id="byupw-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181 136"><path d="M15.8 102.9c0.1 0 0.1 0.2 0.1 0.4 0 0.1 0 0.2 0 0.2H8.2c0 0 0-0.1 0-0.2 0-0.2 0-0.3 0.1-0.4 1.1-0.1 1.5-0.2 1.8-0.4 0.3-0.1 0.6-0.8 0.6-5.5v-3.7c0-4.7-0.2-5.3-0.6-5.4 -0.3-0.2-0.8-0.3-1.8-0.5 0 0-0.1-0.2-0.1-0.4 0-0.1 0-0.2 0-0.2 1.2 0 2.4 0 3.4 0 1 0 2 0 3 0 3.8 0 6.2 2 6.2 4.7 0 2.3-2.3 4.8-5.7 4.8h-0.4c0 0 0-0.1 0-0.3 0-0.2 0-0.3 0.1-0.3 2.4 0 3.4-2.4 3.4-4.2 0-2.3-1.4-3.6-3.6-3.6 -0.6 0-1 0.1-1.2 0.3S13 89.7 13 93.3V97c0 4.7 0.2 5.3 0.5 5.5C13.9 102.7 14.6 102.8 15.8 102.9zM33.3 102.9c0 0 0.1 0.1 0.1 0.3s0 0.3-0.1 0.3h-5.6c0 0-0.1-0.1-0.1-0.3s0-0.3 0.1-0.3c0.8 0 1.3-0.2 1.7-0.5 0.5-0.4 1.1-1.3 2.6-5.4l1.4-3.7c0.8-2.2 1.7-4.4 2.4-6.4 0-0.1 0.3-0.1 0.6-0.1s0.6 0 0.6 0.1c0.7 2 1.4 3.7 2.2 5.8l1.7 4.4c1.9 4.9 2.3 5.1 2.8 5.4s0.9 0.4 1.6 0.4c0 0 0 0.1 0 0.2 0 0.2 0 0.4 0 0.4h-6.2c0 0 0-0.2 0-0.4 0-0.1 0-0.2 0-0.2 0.8 0 1.3-0.2 1.3-0.6 0-0.4-0.3-1.3-1.9-4.9h-5.3c-1.2 3.3-1.5 4.2-1.5 4.8C31.8 102.6 32.2 102.8 33.3 102.9zM33.8 96.2h4.4L36 90.3 33.8 96.2zM66.4 86.5c-0.5 0.2-1.4 0.3-7.8 0.3 -4.6 0-6.7-0.1-7.6-0.3 -0.1 0-0.1 0-0.1 0.1l-0.4 3.7c0 0 0.3 0.1 0.5 0.1 0.1 0 0.1 0 0.1 0 0.1-0.6 0.4-1.4 0.8-1.8 0.6-0.6 1.4-0.9 4.1-0.9 0.6 0 1.1 0 1.3 0 0.1 0.3 0.1 1.3 0.1 2.9v6.2c0 4.7-0.2 5.3-0.5 5.4 -0.3 0.2-1 0.3-2.1 0.4 0 0-0.1 0.2-0.1 0.3s0 0.3 0.1 0.3h7.6c0 0 0-0.1 0-0.3s0-0.3 0-0.3c-1.1-0.1-1.7-0.2-2.1-0.4 -0.3-0.1-0.6-0.7-0.6-5.4v-6.2c0-1.6 0-2.6 0.1-2.9 0.2 0 0.6 0 1.2 0 2.9 0 3.6 0.3 4.1 0.9 0.3 0.4 0.5 1.1 0.5 1.7 0 0 0.2 0.1 0.4 0.1 0.1 0 0.2 0 0.2 0 0.2-1.4 0.2-2.9 0.2-3.9C66.6 86.6 66.5 86.5 66.4 86.5zM93 87.9c0.3-0.2 0.8-0.3 1.8-0.5 0.1 0 0.1-0.2 0.1-0.3s0-0.2 0-0.2h-7.2c0 0-0.1 0.1-0.1 0.3s0 0.3 0.1 0.3c1.1 0.1 1.5 0.3 1.8 0.5 0.3 0.1 0.6 0.7 0.6 5.4v1.2h-9.7v-1.2c0-4.7 0.2-5.3 0.6-5.4 0.3-0.2 0.8-0.3 1.8-0.5 0 0 0.1-0.2 0.1-0.4 0-0.1 0-0.2 0-0.2h-7.2c0 0 0 0.1 0 0.3s0 0.3 0.1 0.3c1.1 0.1 1.5 0.3 1.8 0.5 0.3 0.1 0.5 0.7 0.5 5.4v3.7c0 4.7-0.2 5.3-0.5 5.4 -0.3 0.2-0.8 0.3-1.8 0.4 -0.1 0-0.1 0.2-0.1 0.3s0 0.3 0 0.3h7.2c0 0 0-0.1 0-0.2 0-0.2 0-0.3-0.1-0.4 -1.1-0.1-1.5-0.2-1.8-0.4 -0.3-0.1-0.6-0.7-0.6-5.4v-1.5h9.7v1.5c0 4.7-0.2 5.3-0.6 5.4 -0.3 0.2-0.8 0.3-1.8 0.4 0 0-0.1 0.2-0.1 0.3s0 0.3 0.1 0.3h7.2c0 0 0-0.1 0-0.2 0-0.1 0-0.3-0.1-0.4 -1-0.1-1.5-0.2-1.8-0.4 -0.3-0.1-0.5-0.7-0.5-5.4v-3.7C92.4 88.6 92.7 88 93 87.9zM129.4 86.8c0 0 0 0.2 0 0.3 0 0.1 0 0.2 0 0.2 -0.8 0.1-1.2 0.2-1.6 0.5 -0.4 0.3-1 0.8-2.7 5.4l-1.4 3.7c-0.8 2.2-1.8 4.4-2.4 6.4 0 0.1-0.3 0.1-0.6 0.1 -0.3 0-0.6 0-0.6-0.1 -0.9-2.3-1.6-4.1-2.6-6.4l-0.6-1.3 -0.6 1.3c-1 2.2-2 4.4-2.8 6.4 0 0.1-0.3 0.1-0.6 0.1 -0.3 0-0.6 0-0.6-0.1 -0.7-2.3-1.3-4.1-2.3-6.4l-1.4-3.7c-1.7-4.6-2.2-5.1-2.6-5.4 -0.4-0.3-1-0.4-1.7-0.5 0 0-0.1-0.1-0.1-0.3s0-0.3 0.1-0.3h6.4c0 0 0 0.1 0 0.3s0 0.3 0 0.3c-1 0.1-1.3 0.3-1.3 0.7 0 0.5 0.3 1.2 1.7 5.2l2.5 7.2 2.8-6.2 -0.4-0.9c-2.1-4.5-2.3-5.1-2.7-5.4 -0.4-0.3-1-0.4-1.8-0.5 0 0 0-0.1 0-0.2 0-0.1 0-0.3 0-0.3h11.3c0 0 0.1 0.2 0.1 0.3 0 0.1 0 0.2-0.1 0.2 -0.8 0.1-1.1 0.2-1.5 0.5 -0.8 0.6-1.3 1.3-3 5.2l3 7.4 2.8-7.2c1.4-3.6 1.6-4.5 1.6-5 0-0.5-0.4-0.7-1.6-0.9 0 0 0-0.1 0-0.2 0-0.1 0-0.3 0-0.3H129.4zM117.4 91.9c1-2.4 1.2-3.2 1.2-3.6 0-0.4-0.4-0.8-1.3-0.8 -0.9 0-1.2 0.3-1.2 0.7 0 0.5 0.2 1 1.2 3.5L117.4 91.9zM150.7 103.5h-6.2c0 0 0-0.2 0-0.4 0-0.1 0-0.2 0-0.2 0.8 0 1.3-0.2 1.3-0.6 0-0.4-0.3-1.3-1.9-4.9h-5.3c-1.2 3.3-1.5 4.2-1.5 4.8 0 0.4 0.4 0.7 1.5 0.8 0 0 0.1 0.1 0.1 0.3s0 0.3-0.1 0.3h-5.6c0 0-0.1-0.1-0.1-0.3s0-0.3 0.1-0.3c0.8 0 1.3-0.2 1.7-0.5 0.5-0.4 1.1-1.3 2.6-5.4l1.4-3.7c0.8-2.2 1.7-4.4 2.4-6.4 0-0.1 0.3-0.1 0.6-0.1 0.3 0 0.6 0 0.6 0.1 0.7 2 1.4 3.7 2.2 5.8l1.7 4.4c1.9 4.9 2.3 5.1 2.8 5.4 0.5 0.3 0.9 0.4 1.6 0.4 0 0 0 0.1 0 0.2C150.7 103.4 150.7 103.5 150.7 103.5zM143.5 96.2l-2.2-5.9 -2.2 5.9H143.5zM168.7 86.8c0 0 0 0.2 0 0.4 0 0.1 0 0.2 0 0.2 0.7 0 1.1 0.1 1.3 0.3 0.1 0 0.1 0.1 0.1 0.3 0 0.4-0.4 1.2-1.4 2.7l-2.7 4.2 -2.6-4.2c-1.3-2.1-1.6-2.7-1.6-2.9 0-0.3 0.6-0.3 1.2-0.3 0 0 0.1-0.1 0.1-0.3 0-0.2 0-0.3-0.1-0.3h-6.4c0 0-0.1 0.2-0.1 0.3 0 0.1 0 0.3 0.1 0.3 0.8 0 1.3 0.1 1.7 0.3 0.5 0.1 0.9 0.6 2.6 3.2l1.5 2.3c0.7 1.1 1.3 2.1 1.9 3.1v0.8c0 4.7-0.2 5.3-0.5 5.4 -0.3 0.2-1 0.3-2.1 0.4 0 0-0.1 0.2-0.1 0.3s0 0.3 0.1 0.3h7.6c0 0 0-0.1 0-0.3s0-0.3 0-0.3c-1.1-0.1-1.7-0.2-2.1-0.4 -0.3-0.1-0.5-0.7-0.5-5.4v-0.9c0.6-1 1.2-2 1.8-3L170 91c1.4-2.2 1.9-2.9 2.5-3.2 0.4-0.1 1.1-0.2 1.8-0.3 0 0 0-0.1 0-0.3 0-0.1 0-0.3 0-0.3H168.7zM33.1 118.7c0 0 0 0.1 0 0.2 0 0.1 0 0.1 0 0.1 -0.5 0.1-0.7 0.1-0.9 0.3 -0.3 0.2-0.6 0.5-1.6 3.2l-0.8 2.2c-0.5 1.3-1 2.6-1.4 3.8 0 0.1-0.2 0.1-0.4 0.1s-0.3 0-0.3-0.1c-0.5-1.3-1-2.4-1.5-3.8l-0.3-0.8 -0.4 0.8c-0.6 1.3-1.2 2.6-1.6 3.8 0 0.1-0.2 0.1-0.4 0.1s-0.3 0-0.3-0.1c-0.4-1.3-0.8-2.4-1.3-3.8l-0.8-2.2c-1-2.7-1.3-3-1.5-3.2 -0.2-0.2-0.6-0.3-1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2H22c0 0 0 0.1 0 0.2 0 0.1 0 0.2 0 0.2 -0.6 0.1-0.8 0.2-0.8 0.4 0 0.3 0.2 0.7 1 3l1.5 4.2 1.6-3.7 -0.3-0.5c-1.2-2.6-1.4-3-1.6-3.2 -0.3-0.2-0.6-0.3-1-0.3 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2h6.6c0 0 0.1 0.1 0.1 0.2s0 0.1-0.1 0.1c-0.5 0.1-0.6 0.1-0.9 0.3 -0.5 0.3-0.8 0.8-1.8 3l1.7 4.3 1.6-4.2c0.8-2.1 0.9-2.6 0.9-3 0-0.3-0.3-0.4-0.9-0.5 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2H33.1zM26.1 121.6c0.6-1.4 0.7-1.9 0.7-2.1 0-0.3-0.2-0.5-0.8-0.5 -0.5 0-0.7 0.2-0.7 0.4 0 0.3 0.1 0.6 0.7 2L26.1 121.6zM47.3 123.4c0 2.6-2.2 5.2-5.4 5.2 -3 0-5.2-2.2-5.2-4.9 0-2.6 2.2-5.2 5.4-5.2C45.1 118.5 47.3 120.7 47.3 123.4zM45.8 123.9c0-2.4-1.5-4.7-4-4.7 -2.8 0-3.5 2.3-3.5 4.1 0 2.4 1.5 4.7 4 4.7C45 128 45.8 125.7 45.8 123.9zM63.6 128.1c0 0 0.1 0.3 0.1 0.3 -0.3 0.1-0.6 0.1-1 0.1 -1 0-1.7-0.1-2.3-0.5 -0.8-0.5-1.7-1.6-2.9-3.6h-0.6c-0.4 0-0.6 0-1 0v0.3c0 2.8 0.1 3.1 0.3 3.2 0.2 0.1 0.7 0.2 1.4 0.3 0 0 0.1 0.1 0.1 0.2 0 0.1 0 0.1 0 0.1H53c0 0 0-0.1 0-0.1 0-0.1 0-0.2 0.1-0.2 0.6-0.1 0.9-0.1 1.1-0.3 0.2-0.1 0.3-0.5 0.3-3.2v-2.2c0-2.8-0.1-3.1-0.3-3.2 -0.2-0.1-0.5-0.2-1.1-0.3 -0.1 0-0.1-0.1-0.1-0.2 0-0.1 0-0.1 0-0.1 0.7 0 1.5 0 2.1 0 0.6 0 1.2 0 1.9 0 2.3 0 3.7 1.2 3.7 2.5 0 1.2-0.9 2.2-2 2.8 2.1 3 3.2 4.1 4.4 4.1H63.6zM59.1 121.6c0-1.4-0.6-2.4-2.1-2.4 -0.5 0-0.9 0.1-0.9 0.2 -0.1 0.1-0.3 1-0.3 3 0 0.9 0.1 1 0.1 1.1 0.2 0.1 0.5 0.3 1.2 0.3C58.3 123.8 59.1 122.8 59.1 121.6zM77.3 125.7c-0.1 0-0.1 0-0.1 0 -0.1 0.5-0.4 1.1-0.7 1.5 -0.4 0.4-1 0.6-1.8 0.6 -0.9 0-1.1-0.1-1.3-0.3 -0.2-0.2-0.3-1.1-0.3-2.9v-2.2c0-2.8 0.1-3.1 0.3-3.2 0.2-0.1 0.5-0.2 1.1-0.3 0 0 0.1-0.1 0.1-0.2 0-0.1 0-0.1 0-0.1h-4.2c0 0 0 0.1 0 0.1 0 0.1 0 0.2 0.1 0.2 0.6 0.1 0.9 0.2 1.1 0.3 0.2 0.1 0.3 0.4 0.3 3.2v2.2c0 2.8-0.1 3.1-0.3 3.2 -0.2 0.1-0.5 0.2-1.1 0.3 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.1 0 0.1 1.1 0 1.9 0 2.9 0 1.3 0 2.4 0.1 3.4 0.1 0.4 0 0.6-0.1 0.7-0.3 0.1-0.2 0.4-1.7 0.5-2.5C77.6 125.7 77.4 125.7 77.3 125.7zM94.6 123.4c0 1.3-0.6 2.6-1.6 3.5 -1.1 1-2.3 1.5-4.2 1.5 -0.7 0-1.8 0-2.4 0 -0.6 0-1.4 0-2.1 0 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.6-0.1 0.9-0.1 1.1-0.3 0.2-0.1 0.3-0.5 0.3-3.2v-2.2c0-2.8-0.1-3.1-0.3-3.2 -0.2-0.1-0.5-0.2-1.1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.7 0 1.5 0 2.1 0 0.6 0 2 0 2.7 0C92.2 118.6 94.6 120.7 94.6 123.4zM93.1 123.7c0-2.3-1.5-4.5-4.4-4.5 -1 0-1.2 0.1-1.3 0.3 -0.1 0.1-0.2 0.8-0.2 2.9v2.3c0 1.8 0.1 2.6 0.3 2.9 0.3 0.3 0.5 0.4 1.3 0.4C91.8 127.9 93.1 126.5 93.1 123.7zM115.5 118.7c0 0 0 0.1 0 0.2 0 0.1 0 0.1 0 0.1 -0.5 0.1-0.7 0.1-0.9 0.3 -0.3 0.2-0.6 0.5-1.6 3.2l-0.8 2.2c-0.5 1.3-1 2.6-1.4 3.8 0 0.1-0.2 0.1-0.4 0.1 -0.2 0-0.3 0-0.3-0.1 -0.5-1.3-1-2.4-1.5-3.8l-0.3-0.8 -0.4 0.8c-0.6 1.3-1.2 2.6-1.6 3.8 0 0.1-0.2 0.1-0.4 0.1 -0.2 0-0.3 0-0.3-0.1 -0.4-1.3-0.8-2.4-1.3-3.8l-0.8-2.2c-1-2.7-1.3-3-1.5-3.2 -0.2-0.2-0.6-0.3-1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2h3.7c0 0 0 0.1 0 0.2 0 0.1 0 0.2 0 0.2 -0.6 0.1-0.8 0.2-0.8 0.4 0 0.3 0.2 0.7 1 3l1.5 4.2 1.6-3.7 -0.3-0.5c-1.2-2.6-1.4-3-1.6-3.2 -0.3-0.2-0.6-0.3-1-0.3 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2h6.6c0 0 0.1 0.1 0.1 0.2s0 0.1-0.1 0.1c-0.5 0.1-0.6 0.1-0.9 0.3 -0.5 0.3-0.8 0.8-1.8 3l1.7 4.3 1.6-4.2c0.8-2.1 0.9-2.6 0.9-3 0-0.3-0.3-0.4-0.9-0.5 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2H115.5zM108.5 121.6c0.6-1.4 0.7-1.9 0.7-2.1 0-0.3-0.2-0.5-0.8-0.5 -0.5 0-0.7 0.2-0.7 0.4 0 0.3 0.1 0.6 0.7 2L108.5 121.6zM124.6 119.3c0.2-0.1 0.6-0.2 1.2-0.3 0 0 0.1-0.1 0.1-0.2 0-0.1 0-0.1 0-0.1h-4.5c0 0 0 0.1 0 0.1 0 0.1 0 0.2 0.1 0.2 0.6 0.1 1 0.2 1.2 0.3 0.2 0.1 0.3 0.4 0.3 3.2v2.2c0 2.8-0.1 3.1-0.3 3.2 -0.2 0.1-0.6 0.2-1.2 0.3 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.1 0 0.1h4.5c0 0 0-0.1 0-0.1 0-0.1 0-0.2-0.1-0.2 -0.6-0.1-1-0.1-1.2-0.3 -0.2-0.1-0.3-0.4-0.3-3.2v-2.2C124.3 119.7 124.4 119.4 124.6 119.3zM143.8 123.4c0 1.3-0.6 2.6-1.6 3.5 -1.1 1-2.3 1.5-4.2 1.5 -0.7 0-1.8 0-2.4 0 -0.6 0-1.4 0-2.1 0 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.6-0.1 0.9-0.1 1.1-0.3 0.2-0.1 0.3-0.5 0.3-3.2v-2.2c0-2.8-0.1-3.1-0.3-3.2 -0.2-0.1-0.5-0.2-1.1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.7 0 1.5 0 2.1 0 0.6 0 2 0 2.7 0C141.4 118.6 143.8 120.7 143.8 123.4zM142.3 123.7c0-2.3-1.5-4.5-4.4-4.5 -1 0-1.2 0.1-1.3 0.3 -0.1 0.1-0.2 0.8-0.2 2.9v2.3c0 1.8 0.1 2.6 0.3 2.9 0.3 0.3 0.5 0.4 1.3 0.4C141 127.9 142.3 126.5 142.3 123.7zM157 126.3C156.9 126.3 156.9 126.3 157 126.3c-0.2 0.5-0.4 0.8-0.6 1.1 -0.3 0.3-0.8 0.5-1.8 0.5 -0.9 0-1.1-0.1-1.3-0.3 -0.2-0.2-0.3-1.1-0.3-2.9v-1h1.1c1.1 0 1.4 0.2 1.5 0.3 0.2 0.1 0.2 0.5 0.2 0.8 0 0 0.1 0.1 0.2 0.1 0.1 0 0.2 0 0.2-0.1 0-0.4 0.1-2.2 0.1-2.6 0 0-0.1 0-0.2 0 -0.1 0-0.2 0-0.2 0 -0.1 0.5-0.3 0.9-1.8 0.9h-1.2v-2.1c0-1 0-1.5 0.1-1.6 0.2 0 0.6 0 1.2 0 1.1 0 1.5 0.1 1.8 0.4 0.2 0.3 0.3 0.6 0.3 1 0 0.1 0.1 0.1 0.2 0.1 0.1 0 0.2 0 0.2-0.1 0.1-0.8 0.1-1.5 0.2-2 0 0 0-0.1-0.1-0.1 -0.5 0-1.2 0.1-2.5 0.1 -1 0-2.9 0-4.1 0 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.2 0.1 0.2 0.6 0.1 0.9 0.2 1.1 0.3 0.2 0.1 0.3 0.5 0.3 3.2v2.2c0 2.8-0.1 3.1-0.3 3.2 -0.2 0.1-0.5 0.2-1.1 0.3 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.2 0.1 0.2 1.1 0 1.7 0 2.7 0 1.3 0 2.4 0.1 3.4 0.1 0.4 0 0.5-0.1 0.6-0.3 0.1-0.2 0.3-1.1 0.3-1.9C157.2 126.3 157 126.3 157 126.3zM10.8 53.4l0-39.5c0-1.3 0.1-1.7-0.8-2.3 -0.9-0.5-1.8-0.6-3.3-0.9 0 0 0 0 0 0 -0.1 0-0.1-0.6 0-0.6l30.8 0c12.8 0 18.7 2.9 18.7 11.7 0 6.4-3.3 9-7 10.2 -0.1 0-0.1 0.2 0 0.2 5.7 1.4 8.6 5.2 8.6 11.4 0 8.3-5.7 13.7-19.1 13.7 0 0-31.8 0-31.9 0 -0.1 0-0.2-0.6 0-0.6 0 0 0 0 0 0 1.5-0.2 2.4-0.3 3.3-0.9C10.8 55.1 10.8 54.7 10.8 53.4zM41.3 42.3c0-5.8-5.1-5.8-9.3-5.8 0 0-4.7 0-5.2 0 -0.6 0-1.1-0.1-1.1-0.1s0.1 0.5 0.1 1.1c0 2.6 0 9.4 0 9.5 0 0.5-0.1 1.1-0.1 1.1s0.5-0.1 1.1-0.1c0.1 0 5.9 0 5.9 0C37.6 48.1 41.3 46.6 41.3 42.3zM25.7 18.9c0 0 0.1 0.5 0.1 1.1 0 2.3 0 7.8 0 8.2 0 0.6-0.1 1.1-0.1 1.1s0.6-0.1 1.1-0.1c0.6 0 6.4 0 6.4 0 5.6 0 7.3-2.5 7.3-5.3 0-4.3-2.8-5-7.5-5 0 0-5.6 0-6.2 0C26.2 19 25.7 18.9 25.7 18.9zM175.8 10.1l-23.6 0c-0.1 0-0.2 0.6 0 0.6 0 0 0 0 0 0 1.5 0.2 2.2 0.3 3.1 0.9 0.9 0.6 0.8 1 0.8 2.3v23.7c0 5.4-3.1 9.6-9.3 9.6s-9.3-4.2-9.3-9.6l0-23.7c0-1.3-0.1-1.7 0.8-2.3 0.9-0.6 1.6-0.7 3.1-0.9 0 0 0 0 0 0 0.1 0 0.1-0.6 0-0.6l-22.2 0c-0.2 0-0.1 0.6 0 0.6 0 0 0 0 0 0 0.8 0.1 1.4 0.1 1.9 0.5 0.7 0.6 0.9 1.4 0.9 2.7l0 23.3c0 11.2 6.2 20.8 24.8 20.8 18.7 0 24.8-9.5 24.8-20.8V13.9c0-1.3-0.1-1.7 0.8-2.3 0.9-0.6 1.8-0.6 3.3-0.9 0 0 0 0 0 0C176 10.7 175.9 10.1 175.8 10.1zM57.8 10.7c1 0.1 1.5 0 2.7 0.6 0.1 0.1 0.5 0.3 0.6 0.4 0.7 0.6 1.2 1.2 2.1 2.5l16.3 24.1 0 15.1c0 1.3 0.1 1.7-0.8 2.3 -0.9 0.6-1.8 0.6-3.3 0.9 0 0 0 0 0 0 -0.1 0-0.1 0.6 0 0.6h25c0.1 0 0.2-0.6 0-0.6 0 0 0 0 0 0 -1.5-0.2-2.4-0.3-3.3-0.9 -0.9-0.6-0.8-1-0.8-2.3v-15l16.3-24.2c0.9-1.3 1.5-2 2.2-2.6 0.1-0.1 0.4-0.3 0.6-0.4 0.7-0.3 0.9-0.4 1.8-0.4 0 0 0 0 0 0 0.1 0 0.2-0.6 0-0.6l-22 0c-0.2 0-0.1 0.6 0 0.6 0 0 0 0 0 0 1.1 0 2.4 0 2.2 1.5 -0.1 1.5-6.5 10.6-8.7 14.1 -0.3 0.5-0.6 1-0.7 1.6 -0.1-0.6-0.5-1.2-0.7-1.6 -3.1-4.7-8.5-12.3-8.7-14.1 -0.1-1.6 1.1-1.5 2.2-1.5 0 0 0 0 0 0 0.2 0 0.2-0.6 0-0.6l-23.1 0C57.6 10.1 57.6 10.7 57.8 10.7 57.7 10.7 57.8 10.7 57.8 10.7zM171.1 73.1c0-0.2-0.2-0.4-0.4-0.4H6.6c-0.2 0-0.4 0.2-0.4 0.4 0 0.2 0.2 0.4 0.4 0.4h164.1C170.9 73.5 171.1 73.3 171.1 73.1z"></path></svg>
                      <span class="icon-pathway-logo"></span>
                  </a>
                  <a id="mobile-pathway" href="//byupathway.lds.org/pathwayconnect" class="hide visible-sm">PathwayConnect</a>
                  <a id="mobile-degrees" href="//byupathway.lds.org/degrees" class="hide visible-sm">Certificates &amp; Degrees</a>
                  <a id="mobile-admissions" href="//byupathway.lds.org/admissions" class="hide visible-sm">Admissions</a>
                  <!--DESKTOP LINKS-->
                  <nav id="desktop">
                      <ul class="nav-icons">
                          <li>
                              <div class="usearch">
                                  <icon class="icon-mag"></icon>
  <form aria-label="Search BYU-Pathway Worldwide" method="get" action="//byupathway.lds.org/results" role="search" class="gsearch">
      <label for="searchDesktop" class="sr-only">Search BYU-Pathway Worldwide: </label>
      <input id="searchDesktop" class="form-control" name="q" placeholder="" alt="Search BYU-PW websites" type="search"><button type="submit" class=""><span class="icon-mag"><span class="sr-only">Submit</span></span></button>
  </form>
                              </div>
                          </li>
                          <li><a href="/help" class="q-mark">?</a></li>
                          <li id="user-menu">




                <a href="/Main/Partners?signmein" class="user"><span class="icon-user"></span><span class="visible-xs">&nbsp;Sign in</span></a>


                          </li>
                          <li>
                              <label class="icon-bars" for="mobile-menu-control"></label>
                          </li>
                      </ul>
                      <ul class="site-nav">
                          <li><a id="nav-pathway" href="//byupathway.lds.org/pathwayconnect">PathwayConnect</a></li>
                          <li><a id="nav-degrees" href="//byupathway.lds.org/degrees">Certificates &amp; Degrees</a></li>
                          <li><a id="nav-admissions" href="//byupathway.lds.org/admissions">Admissions</a></li>
                      </ul>
                      <ul class="subnav-pathway hide">
                          <li><a id="nav-overview" href="//byupathway.lds.org/pathwayconnect">Overview</a></li>
                          <li><a id="nav-structure" href="//byupathway.lds.org/pathwayconnect/structure">Courses &amp; Structure</a></li>
                          <li><a id="nav-benefits" href="//byupathway.lds.org/pathwayconnect/benefits">Benefits</a></li>
                          <li><a id="nav-tuition" href="//byupathway.lds.org/pathwayconnect/structure/#tuition">Tuition</a></li>
                          <li><a id="nav-locations" href="//byupathway.lds.org/pathwayconnect/locations">Locations</a></li>
                      </ul>
                  </nav>
                  <!--MOBILE LINKS-->
                  <nav id="mobile">
                      <ul class="nav-icons">
                          <li>
                              <a href="//byupathway.lds.org/admissions" class="button visible-md">Apply</a>
                          </li>
                          <li>
                              <label class="icon-bars" for="mobile-menu-control"></label>
                          </li>
                      </ul>
                  </nav>
              </div>
          </div>

          <!--MOBILE MENU-->
          <input class="hidden" type="checkbox" id="mobile-menu-control">
          <nav id="mobile-pop">
              <ul class="site-nav">
                  <li>
                      <div class="usearch-mobile">
  <form aria-label="Search BYU-Pathway Worldwide" method="get" action="//byupathway.lds.org/results" role="search" class="gsearch">
      <label for="searchDesktop" class="sr-only">Search BYU-Pathway Worldwide: </label>
      <input id="searchDesktop" class="form-control" name="q" placeholder="" alt="Search BYU-PW websites" type="search"><button type="submit" class=""><span class="icon-mag"><span class="sr-only">Submit</span></span></button>
  </form>
                      </div>
                  </li>
                  <li class="visible-sm"><a href="//byupathway.lds.org/admissions" class="button">Apply</a></li>
                  <li>
                      <a href="//byupathway.lds.org/"><span class="icon-home"></span> HOME</a>
                  </li>
                  <li>




                <a href="/Main/Partners?signmein" class="user"><span class="icon-user"></span><span class="visible-xs">&nbsp;Sign in</span></a>


                  </li>
                  <li>
                      <a id="nav-pathway" href="//byupathway.lds.org/pathwayconnect">PathwayConnect</a>
                      <ul class="subnav-pathway hide">
                          <li><a id="nav-overview" href="//byupathway.lds.org/pathwayconnect">Overview</a></li>
                          <li><a id="nav-structure" href="//byupathway.lds.org/pathwayconnect/structure">Courses &amp; Structure</a></li>
                          <li><a id="nav-benefits" href="//byupathway.lds.org/pathwayconnect/benefits">Benefits</a></li>
                          <li><a id="nav-tuition" href="//byupathway.lds.org/pathwayconnect/structure/#tuition">Tuition</a></li>
                          <li><a id="nav-locations" href="//byupathway.lds.org/pathwayconnect/locations">Locations</a></li>
                      </ul>
                  </li>
                  <li>
                      <a id="nav-degrees" href="//byupathway.lds.org/degrees">Certificates &amp; Degrees</a>
                  </li>
                  <li>
                      <a id="nav-admissions" href="//byupathway.lds.org/admissions">Admissions</a>
                  </li>
              </ul>
              <ul class="common-nav">
                  <li><a href="/help">Help</a></li>
              </ul>
          </nav> <!--End MOBILE MENU-->
      </header>
  <div id="main-container">
    <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-8 main-content">
            <button type="button" onclick="open_side();" class="navbar-toggle sidebar-btn collapsed">
                <img id="arrow-icon" src="/Content/images/arrow.png" width="14" height="14" alt="arrow" class=""></button>
            <br>
            <div class="hero pf-page-header">
                <img alt="speaking partners icon" src="/Content/images/Speaking-Partners-Main/website_speakingpartners_image5.png">
                <h2 class="heading green">Speaking Partners</h2>
            </div>
            <br>
            <div class="pf-section">

                <p>We’ve all heard that English is the “universal language.” But do you know why? Perhaps it’s because those who know English typically make more money than those who don’t. Or maybe it’s because 1/4 of the world’s population speak the language at a useful level.
                    <br>
                    <br>
                    But no matter the reason, one thing is certain — learning English sets people up for better opportunities educationally, socially, economically, and more. </p>
                <div class="img-responsive">
                    <img alt="skype meeting" src="/Content/images/speaking-partners-main/website_speakingpartners_image1.png"></div>
            </div>
            <h3 class="inset">That's where Speaking Partners comes in.</h3>

            <div class="pf-section">For non-native English-speaking PathwayConnect students, improving English skills is a primary purpose of the PathwayConnect experience. So, in addition to English-learning activities built in to PathwayConnect’s academic courses, students also enhance their English speaking and listening abilities through the Speaking Partner Program.</div>

            <h2 class="subsection"><a id="works"></a>How Speaking Partners Works</h2>

            <div class="img-responsive">
                <img alt="illustration - across the world" src="/Content/images/speaking-partners-main/website_speakingpartners_image2.png"></div>
            <div class="image-caption-1">Students enrolled in PathwayConnect’s L version (for non-native English speakers) practice and improve their English abilities through conversations with fluent English speakers. </div>
            <div class="img-responsive">
                <img alt="illustration - speaking partner meeting" src="/Content/images/speaking-partners-main/website_speakingpartners_image3.png"></div>
            <div class="image-caption-2">Each discussion lasts 30 minutes and occurs once a week for 12 consecutive&nbsp;weeks.</div>
            <br>
            <div id="video-info-block">
                <img alt="play-button" class="play-button img-responsive" src="/Content/images/speaking-partners-main/speakingpartner_playbutton.png">
                <p class="note green">Watch the video below to learn more about the Speaking Partner Program.</p>
            </div>

            <div class="responsive-video-container">
                <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1157612/sp/115761200/embedIframeJs/uiconf_id/16585652/partner_id/1157612?iframeembed=true&amp;playerId=kaltura_player&amp;entry_id=0_1neab2a9&amp;flashvars[mediaProtocol]=rtmp&amp;flashvars[streamerType]=rtmp&amp;flashvars[streamerUrl]=rtmp://www.kaltura.com:1935&amp;flashvars[rtmpFlavors]=1&amp;&amp;wid=0_dxmedij9" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" frameborder="0"></iframe>
            </div>

            <h2 class="subsection"><a id="become"></a>Become a Speaking Partner Mentor</h2>
            <div class="pf-section">Be the person who can improve the life of a PathwayConnect student. Enjoy cultural exchange, the joy of service, and learn something new about the world!</div>

            <br>
            <div class="bullet-box">
                <h3>To serve, all you need to do is:</h3>
                <ul>
                    <li>Speak English fluently</li>
                    <li>Be a member of The Church of Jesus Christ of Latter-day Saints, a BYU-Idaho student, or a PathwayConnect student</li>
                    <li>Be 18 years of age or older</li>
                    <li>Participate in a 30-minute appointment once a week for 12 consecutive weeks</li>
                </ul>
            </div>

            <a href="http://pathwaysupport.org/student/speaking-partner-registration/" target="_blank">
                <img class="img-responsive img-space" src="/Content/images/speaking-partners-main/speakingpartner_signup.png" alt="Click here to sign up as a speaking partner"></a>

            <div id="video-info-block2">
                <img alt="play-button" class="play-button img-responsive" src="/Content/images/speaking-partners-main/speakingpartner_playbutton.png">
                <p class="note green">To watch more videos or learn more about PathwayConnect, visit our <a target="_blank" href="http://pathwaynewsroom.org/photos-and-videos">Media Page</a>, or click on one of the social media links at the bottom of the page.</p>
            </div>
        </div>



        <!-- Sidebar Start -->
<div class="col-xs-6 col-sm-4 sidebar-offcanvas pull-right fixed" id="sidebar" role="navigation">
    <div class="pf-sidebar header NoAffix footnote fixed" id="sideNav" role="complementary">
        <ul class="nav darkgreen pf-sidenav">

            <li class="active"><a href="/Main/Partners"><span class="caret"></span>Speaking Partners</a>
                <ul class="nav drop-down">
                    <li onclick=" "><a href="#works">How Speaking Partners Works</a> </li>
                    <li onclick=" "><a href="#become">Become a Speaking Partner Mentor</a> </li>
                </ul>
            </li>
            <li class=""><a href="/Main/SignUp"><span class="caret"></span>Sign Up / Find A Partner</a> </li>
            <li class=""><a href="/Main/Materials"><span class="caret"></span>Discussion Materials</a> </li>
            <li class=""><a href="/Main/Guidelines"><span class="caret"></span>Guidelines For Mentors</a> </li>
            <li class=""><a href="/Main/ContactUs"><span class="caret"></span>Contact Us</a> </li>
            <li><a href="/help#sp-section"><span class="caret"></span>FAQ</a> </li>
        </ul>
    </div>
</div>

        <!-- End Sidebar -->
    </div>
</div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ourpathway/dismiss-click-vpRWpN */
.amber1 {
  color: #F7E4B1;
}

.amber2 {
  color: #F6C779;
}

.amber3 {
  color: #F0A11F;
}

.amber4 {
  color: #C7802A;
}

.amber1-bg {
  background-color: #F7E4B1;
}

.amber2-bg {
  background-color: #F6C779;
}

.amber3-bg {
  background-color: #F0A11F;
}

.amber4-bg {
  background-color: #C7802A;
}

.navy1 {
  color: #EFF3F6;
}

.navy2 {
  color: #3793A8;
}

.navy3 {
  color: #065577;
}

.navy4 {
  color: #0D3354;
}

.navy1-bg {
  background-color: #EFF3F6;
}

.navy2-bg {
  background-color: #3793A8;
}

.navy3-bg {
  background-color: #065577;
}

.navy4-bg {
  background-color: #0D3354;
}

.red1 {
  color: #F8EADF;
}

.red2 {
  color: #F9BA90;
}

.red3 {
  color: #F58D47;
}

.red4 {
  color: #CB4A27;
}

.red1-bg {
  background-color: #F8EADF;
}

.red2-bg {
  background-color: #F9BA90;
}

.red3-bg {
  background-color: #F58D47;
}

.red4-bg {
  background-color: #CB4A27;
}

.teal1 {
  color: #E2EEF1;
}

.teal2 {
  color: #A7CDD4;
}

.teal3 {
  color: #6CABB7;
}

.teal1-bg {
  background-color: #E2EEF1;
}

.teal2-bg {
  background-color: #A7CDD4;
}

.teal3-bg {
  background-color: #6CABB7;
}

.lime1 {
  color: #D9E69E;
}

.lime2 {
  color: #CDDA5C;
}

.lime3 {
  color: #BABF3C;
}

.lime4 {
  color: #8B9531;
}

.lime5 {
  color: #696E2A;
}

.lime1-bg {
  background-color: #D9E69E;
}

.lime2-bg {
  background-color: #CDDA5C;
}

.lime3-bg {
  background-color: #BABF3C;
}

.lime4-bg {
  background-color: #8B9531;
}

.lime5-bg {
  background-color: #696E2A;
}

.black1 {
  color: #F1F2F2;
}

.black2 {
  color: #E6E7E8;
}

.black3 {
  color: #BBBDBF;
}

.black4 {
  color: #58595B;
}

.black5 {
  color: #000000;
}

.black1-bg {
  background-color: #F1F2F2;
}

.black2-bg {
  background-color: #E6E7E8;
}

.black3-bg {
  background-color: #BBBDBF;
}

.black4-bg {
  background-color: #58595B;
}

.black5-bg {
  background-color: #000000;
}

.white {
  color: #FFFFFF;
}

body > div:nth-of-type(2) {
  padding-left: 5%;
  padding-right: 5%;
  margin: 100px auto;
}
@media (min-width: 767px) {
  body > div:nth-of-type(2) {
    max-width: 1200px;
    margin: 140px auto;
  }
  body > div:nth-of-type(2) div, body > div:nth-of-type(2) p, body > div:nth-of-type(2) ol > li, body > div:nth-of-type(2) ul > li {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
  }
  body > div:nth-of-type(2) ol.list-small > li, body > div:nth-of-type(2) ul.list-small > li {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
  }
  body > div:nth-of-type(2) blockquote, body > div:nth-of-type(2) .quote-block p {
    font-size: 24px;
    max-width: 80%;
    font-style: italic;
    border-left: 4px solid #F0A11F;
    padding-left: 20px;
  }
}
body > div:nth-of-type(2) .page-summary {
  font-style: italic;
  margin-top: -15px;
}
body > div:nth-of-type(2) h4 {
  text-transform: initial;
}
body > div:nth-of-type(2) a > img {
  max-width: 100%;
}
body > div:nth-of-type(2) .image-container {
  list-style: none;
}
body > div:nth-of-type(2) .image-container li {
  display: inline;
}
body > div:nth-of-type(2) img[class*=col-] {
  align-self: flex-start;
}
body > div:nth-of-type(2) div.img-responsive {
  margin-top: 40px;
  margin-bottom: 10px;
}
body > div:nth-of-type(2) div.img-responsive img {
  width: 80%;
}
body > div:nth-of-type(2) .responsive-video-container iframe {
  width: 100%;
  height: 350px;
}
@media (min-width: 767px) {
  body > div:nth-of-type(2) .responsive-video-container iframe {
    height: 400px;
  }
}
body > div:nth-of-type(2) .pf-page-header > img {
  float: left;
  margin: -10px 10px 0 -4px;
}
body > div:nth-of-type(2) .icon-header > img {
  float: left;
  margin: -10px 10px 0 -55px;
}
body > div:nth-of-type(2) .play-button {
  float: left;
  margin-right: 10px;
}
body > div:nth-of-type(2) p a:not(img):hover, body > div:nth-of-type(2) li a:not(img):hover {
  text-decoration: underline;
}
body > div:nth-of-type(2) [class*="accordion-"]:not([class*="-accordion"]) {
  position: relative;
  text-transform: capitalize;
  font-size: 100%;
  letter-spacing: 0.08em;
  color: #173e6b;
  padding: 10px 24px;
  cursor: pointer;
  font-weight: bold;
  background-color: #eee;
}
body > div:nth-of-type(2) [class*="accordion-"]:not([class*="-accordion"]):before {
  content: "";
  position: absolute;
  left: 7px;
  width: 0;
  height: 0;
  margin-top: 6px;
  border: 8px solid transparent;
  border-left: 8px solid #173e6b;
  transition: all .3s;
  -ms-transform-origin: 10% 50%;
  -webkit-transform-origin: 10% 50%;
  transform-origin: 10% 50%;
}
body > div:nth-of-type(2) [class*="accordion-"]:not([class*="-accordion"]).active {
  background-color: #F7E4B1 !important;
  text-decoration: none !important;
}
body > div:nth-of-type(2) [class*="accordion-"]:not([class*="-accordion"]).active:before {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
body > div:nth-of-type(2) [class*="accordion-"]:not([class*="-accordion"]):hover {
  background-color: #F7E4B1 !important;
  text-decoration: none !important;
}
@media (min-width: 767px) {
  body > div:nth-of-type(2) .pf-page-header > img {
    margin: 0px 10px 0 -60px;
  }
  body > div:nth-of-type(2) .main-content {
    padding-right: 30px;
  }
}
body > div:nth-of-type(2) .section-header {
  position: relative;
  background-color: #dc4831;
  text-transform: uppercase;
  color: white;
  font-size: 120%;
  letter-spacing: 0.08em;
  margin: 20px 0 20px 28px;
  padding: 2px 20px;
}
body > div:nth-of-type(2) .icon-header {
  position: relative;
  display: block;
  font-size: 160%;
  font-weight: normal;
  padding: 15px 0 20px 60px;
}
body > div:nth-of-type(2) .narrow-bold {
  font-weight: bold;
  text-transform: uppercase;
}
body > div:nth-of-type(2) #sidebar {
  background-color: #eee;
  max-width: 100%;
  padding-top: 25px;
}
body > div:nth-of-type(2) #sidebar .language-buttons ul {
  list-style: none;
  background-color: #ddd;
  padding: 0;
  margin: 0 0 30px 0;
  white-space: wrap;
  text-align: center;
}
body > div:nth-of-type(2) #sidebar .language-buttons ul li {
  display: inline-block;
  padding: 5px 10px;
  margin: 10px 2px;
  background-color: #eee;
  border-radius: 5px;
}
body > div:nth-of-type(2) #sidebar .language-buttons ul li.active {
  background-color: #F0A11F;
}
body > div:nth-of-type(2) #sidebar .language-buttons ul li.active a {
  color: white;
}
body > div:nth-of-type(2) #sidebar .pf-sidenav {
  list-style: none;
  padding: 0 0 0 8px;
}
body > div:nth-of-type(2) #sidebar .pf-sidenav li {
  padding: 4px 0;
  font-size: 16px !important;
}
body > div:nth-of-type(2) #sidebar .pf-sidenav li:before {
  content: "";
}
body > div:nth-of-type(2) #sidebar .pf-sidenav li > .drop-down {
  list-style: none;
}
body > div:nth-of-type(2) #sidebar .pf-sidenav li.active {
  font-weight: bold;
}
body > div:nth-of-type(2) #sidebar .pf-sidenav li.active > .drop-down {
  display: block;
}
body > div:nth-of-type(2) #sidebar .pf-sidenav li:not(.active) .drop-down {
  display: none !important;
}
@media (min-width: 767px) {
  body > div:nth-of-type(2) #sidebar {
    padding-top: 0;
  }
}
body > div:nth-of-type(2) .sidebar-btn {
  position: fixed;
  z-index: 2;
  left: 2px;
}
body > div:nth-of-type(2) div.sidebar-offcanvas {
  display: none;
}
body > div:nth-of-type(2) div.sidebar-offcanvas.open-mobile {
  display: block;
  position: fixed;
  left: 0;
  width: 100%;
}
@media (min-width: 767px) {
  body > div:nth-of-type(2) .sidebar-btn {
    display: none !important;
  }
  body > div:nth-of-type(2) div.sidebar-offcanvas {
    display: block;
  }
  body > div:nth-of-type(2) div.sidebar-offcanvas.open-mobile {
    position: static;
  }
}


/*Downloaded from https://www.codeseek.co/ourpathway/dismiss-click-vpRWpN */
jQuery(document).ready(function () {
    console.log('docready');

    // HIDES
    // hide any div after an .accord class
    jQuery(".accord").next().hide();
    
    // CLICKS
    //table accordion and other accordions
    jQuery(".t-accord h3, .accord").on("click", {type: "accord"}, opener);
    jQuery("h4.accordion-header").on("click", {type: "accord-pw"}, opener);
    //only bind the foot-accord if we're on mobile
    if (jQuery(window).width() <= 768) {
        jQuery(".foot-accord").on("click", {type: "accord"}, opener);
    }
    
    //SEARCH SLIDE (in top nav)
    jQuery(".usearch icon.icon-mag").on("click", searchSlide);
    jQuery(".usearch .gsearch").on("focusout", searchOut);

    //jQuery("#lity-country").on("change", nlSelected);
    // engage vertical tabs, using jQueryUI tabs()
    jQuery("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    jQuery("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");

    // engage fixed menu
    jQuery('#nav-wrap').appear();
    jQuery('body').on('disappear', '#nav-wrap', fixNav);
    jQuery('body').on('appear', '#nav-wrap', fixNav);

// AUTO-RUN FUNCTIONS...
    // open accordions or halfys if URL has hash
    openFromHash();
  
    // dismiss click for open menus
  jQuery(document).click(function(e) {
        if (!jQuery('#sidebar').is(e.target) && !jQuery('.sidebar-btn').is(e.target) && jQuery('#sidebar').has(e.target).length === 0 && jQuery('.sidebar-btn').has(e.target).length === 0){
            jQuery('#sidebar').hide();
            jQuery('#sidebar').removeClass("open-mobile");
            jQuery('.sidebar-btn').removeClass("inverse");
        }
    });
});
/////////////////////////////////////////////////
// FUNCTIONS

// AM: this needs to be refactored to use 'jquery.appear' as we're doing for animations
function fixNav() {
    if (jQuery(window).scrollTop() > 90) {
        jQuery('#nav-wrap').addClass('fixed');
    } else {
        jQuery('#nav-wrap').removeClass('fixed');
    }
}

// open sections based on URL hash, and if that section is a child of another hidden section (article), also show it
function openFromHash() {
    if (location.hash) {
        // the selector
        theHash = location.hash;
        scrollToElement(theHash);
    }
    // make sure we're on the fixed nav menu
    //jQuery('#nav-wrap').addClass('fixed');
}

//This function triggers the click for any type of opener
function triggerClick(theSelector, i) {
// Section type data definition:   
// 1-panel-pw

    i = i - 1;
    var theType = ['panel-pw'];
    jQuery(theSelector).triggerHandler("click", [theType[i]]);
}

// mega function for showing stuff
function opener(event, openType) {
    // default is to change according to this item's id.
    if (jQuery(this).attr('id')) {
        var mainId = "#" + jQuery(this).attr('id');
    } else {
        var mainId = "#";
    }

    if (event.data.type === "accord" || openType === "accord") {
        jQuery(this).next().slideToggle();
        jQuery(this).toggleClass("active");
    } else if (event.data.type === "accord-pw" || openType === "accord-pw") {
        // AM: this is just here so the final pushState stuff will update the hash, which sisters this functionality to the old accordion.js that is now in place. Ugly, I know.
        
    } else if (event.data.type === "panel" || openType === "panel") {
        var which = '#' + jQuery(this).attr('data-target');
        jQuery('.panel-link').removeClass('panel-on');
        jQuery(this).addClass('panel-on');
        jQuery('.panel-target').hide();
        jQuery(which).show();
        if (jQuery(window).width() <= 768) {
            scrollToElement(which);
        }

    } else if (event.data.type === "panel-self" || openType === "panel-self") {

        //AM: this is like the panel, but the id opens itself, not a target div
        //could probably be combined with panel when refactoring
        var which = location.hash;
        jQuery('.panel-link').removeClass('panel-on');
        jQuery(this).addClass('panel-on');
        jQuery('.panel-target').hide();
        jQuery(which).show();
        jQuery('html,body').scrollTop(0);

    } else if (event.data.type === "panel-pw" || openType === "panel-pw") {

        //AM: this is like the panel, but for the old PW (bootstrap) panels
        //could probably be combined with panel when refactoring
        event.preventDefault();
        var which = jQuery('a', this).attr("href");
        console.log(which);
        jQuery('.contact-tab').removeClass('active');
        jQuery(this).addClass('active');
        jQuery('.tab-pane').hide();
        jQuery(which).show();
        jQuery('html,body').scrollTop(0);
    }

    // if we came here by click instead of by page load...
    if (typeof openType === 'undefined' && mainId !== "#") {
        //update the URL
        if (history.pushState) {
            history.pushState(null, null, mainId);
        } else {
            location.hash = mainId;
        }
    }
}

function searchSlide() {
    jQuery(".usearch .gsearch").focusin(function () {
        jQuery(".usearch .gsearch").addClass("slide");
        jQuery(".usearch").addClass("slide");
    });
    jQuery(".usearch input[type=search]").focus();
}
function searchOut() {
    jQuery(".usearch .gsearch").removeClass("slide");
    jQuery(".usearch").removeClass("slide");
}

Comments