javascript - Dropdown is reloading home page on click -


i using drop down additional content. not sure why drop down isn't working properly. when clicked on 'read more' link takes me home page or refreshes home page. made jsfiddle , it's doing same there. info on doing wrong appreciated.

$('.expand-notice').on('click', function(e) {      e.preventdefault();      var parent = $(this.parentnode.parentnode);      parent.toggleclass('open-notice');      if (parent.hasclass('open-notice')) $(this).text('less');      else $(this).text('read more');    });
.notice {    background: #dddddd;    max-width: 40em;    margin: 0 auto 0.5em;    padding: 1em;    text-align: center;    font-family: sans-serif;    letter-spacing: 1px;  }  .notice p {    margin: 0;  }  .notice-type,  .notice-title {    font-family: sans-serif;  }  .notice-type {    text-transform: uppercase;    opacity: 0.8;    font-size: 11px;    letter-spacing: 2px;  }  .notice-title {    font-size: 20px;  }  .notice-content {    display: none;    text-align: left;    margin: 5px;  }  .notice-content p {    letter-spacing: 0;    padding: 5px;  }  .open-notice .notice-content {    display: block;  }    .recent-news {    margin: 0em auto;    max-width: 80em;    padding: 0 3% 2em;    overflow: hidden;    text-align: center;  }  .recent-news h2 {    margin-top: 0.5em;  }    .news-item {    display: inline-block;    margin: 1.5em 0 0 0;    width: 47.75%;    background: #fff;    padding: 2em 0em;    text-align: center;    vertical-align: top;  }  .news-item:nth-child(2n) {    margin-left: 3%;  }  .news-item p {    padding: 0em 1.5em;    margin: 0em;    line-height: 1.6;  }  .news-item p.news-date {    font-size: 0.95em;  }
<div class="page" data-subject-page="1">    <div class="largetext" data-subject-text="">      <div class="recent-news">      <h1>main title</h1>        <div class="notice">        <p class="notice-type">date</a>        <p class="notice-title">sub title</p>          <div class="notice-content">          <p>content here</p>          </div>          <p><a href="/" class="expand-notice">read more</a></p>        </div>      </div>    </div>  </div>

remove href attribute tag , wrap scripts

$(document).ready() 

please see fiddle


Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -