Jump to content

help with creating a box that shows content when clicked


justin7410

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

×
×
  • 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.