Jump to content
Sign in to follow this  
justin7410

help with creating a box that shows content when clicked

Recommended Posts

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.

Share this post


Link to post
Share on other sites

 

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();

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.