0
$('div.view-more').on('click', function(e){
 e.preventDefault();
$(this).find('div.hidden-box').slideToggle('click');






});

I have a view more button that when I click on it slides down a hidden set of images. However when I try to click the images it doesn't open up a new page in the browser to see it in full view, instead the set of images just toggle up and down. Any way I can only apply the preventDefault only towards the view more button while being able to open up the images in a new tab? thanks

DCastillo
  • 23
  • 5
  • 1
    possible duplicate of [How to trigger an event after using event.preventDefault()](http://stackoverflow.com/questions/7610871/how-to-trigger-an-event-after-using-event-preventdefault) – davidcondrey Sep 30 '14 at 01:17
  • can you click the code snippet button and paste in some html, css and the js? i have a feeling that your .view-more div is covering the dropdown div so that when you think you're clicking on one of the images, you're actually still clicking the .view-more div. – manishie Sep 30 '14 at 04:50
  • Hey I just posted the html of the webpage. – DCastillo Sep 30 '14 at 16:25

2 Answers2

0
<div class="view-more">
        <a href="#">  <span class="glyphicon glyphicon-chevron-down"> 
            <p style="text-align: center; border: none;"> View More</p> </span>
        </a>
      <div class="container hidden-box">
        <div class="row">
          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/pbnotgoan/9e314e76731911e2ade722000a1faea4_7.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/pbnotgoan/9e314e76731911e2ade722000a1faea4_7.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>

          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/rvjbnkbun/1425791_599182570117896_1105202663_n.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/rvjbnkbun/1425791_599182570117896_1105202663_n.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>

          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/i9pr79kov/10561737_10204539160577633_8045091079031783280_n.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/i9pr79kov/10561737_10204539160577633_8045091079031783280_n.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>

          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/u1dmi2fb3/1012318_10201552746799155_796052209_n.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/u1dmi2fb3/1012318_10201552746799155_796052209_n.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>



        </div> <!-- end of row -->
      </div> <!-- end of hidden box -->
    </div>
DCastillo
  • 23
  • 5
0

Just figured out. Apparently the view-more div was wrapping around the div.hidde-box. The view-more was acting as the parent. Now they are siblings.

I also used this code in my js file. 

   $('div.view-more').on('click', function(e){
             e.preventDefault();
           $(this).siblings('div.hidden-box').slideToggle();


            });
DCastillo
  • 23
  • 5