CODEWITHSUNDEEP
jqueryhtmlcss
user3400679
user3400679

Reputation: 57

jquery: How to show specific set of DIVs when clicked on specific elements

I want to make something which kinda looks like pop up boxes, but with some differences. I want to hide the clicked elements and at the same time I want to show another element in the place of the previous one and mask the rest of the page but I want the new element to stay in its place.

I don't want it to float and move while scrolling the page.

Here is my try: jsfiddle

It works only for one element, I want to apply it to a set of elements. The content of each 'largebox' is different for others...

By the way, hiding and showing the clicked element ('smallbox') doesn't have an interesting effect, what can I do for that?

HTML:

<a href="#show" class="showlargebox" >
<div class="smallbox">
<p>title1</p>
</div>
</a>
<div id="show" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>Content1</p>
</div>
<p></p>

<a href="#show" class="showlargebox" >
    <div class="smallbox">
    <p>title2</p>
    </div>
</a>
<div id="show" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>content2</p>
</div>

Upvotes: 0

Views: 71

Answers (1)

Anujith
Anujith

Reputation: 9370

See this: DEMO

You have multiple items with same id which is invalid..

<a href="#show1" class="showlargebox" >
<div class="smallbox">
<p>title1</p>
</div>
</a>
<div id="show1" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>Content1</p>
</div>
<p></p>

<a href="#show2" class="showlargebox" >
<div class="smallbox">
<p>title2</p>
</div>
</a>
<div id="show2" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>content2</p>
</div>`

Upvotes: 1

Related Questions