help with creating a box that shows content when clicked

[justin7410]

Hey guys,

 

i am trying to create a box to show images or content once a user selects a link within a gallery.

 

So for example i have an image --> user scrolls over --> image overlay shows a link ---> link actions to a jquery action to where a hidden field shows more data.

 

right now i have everything to the point to where the links default action is disabled and the "overlay" div that will show the content is hidden.

 

when i then go ahead and add some jquery to add a class when the link is clicked nothing seems to happen.

    <section class="work_area" id="WORK">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="work_title  wow fadeInUp animated">
                        <h1>demo<span style="color: #64bdec; font-weight: bolder;">33</span> PORTFOLIO</h1>
                         <img src="images/arrow486.png" alt=""> 
                    </div>
<div id="dataBox"></div>
                </div>
            </div>
        </div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 no_padding">
<div class="single_image">
<img src="images/REGISTERE.png" alt="">
<div class="image_overlay">

<h2>Lorem ipsum</h4>
<a id="link" href="portfolio.php" >Popup link</a>
</div>
</div>
</div>
</div>
</div>
    </section>

CSS

#dataBox{
	
	
	width: 800px;
	height: 500px;
	margin: auto;
	padding: 100px 100px;
	position: relative;
	border: 2px solid black;
	margin-bottom: 10px;

}

#pData{
	
        background: red;
	width: 800px;
	height: 500px;
	margin: auto;
	padding: 100px 100px;
	position: relative;
	border: 2px solid black;

}

JS.

$(document).ready(function(){
	
	
		$('#dataBox').hide();
		
		$('#link').click(function(e){
			
					e.preventDefault();
					
					$('div #dataBox').removeClass().addClass('pData');
					console.log("link is working");
			
		});
	
	
	
});

everything works other than the div showing up.

[Ch0cu3r]

 

everything works other than the div showing up.

Because your #dataBox div is still hidden you need to call .show() when the user has clicked the link

$('div #dataBox').removeClass().addClass('pData').show();