CODEWITHSUNDEEP
jqueryhtmlcssdynamic
Sargam Gupta
Sargam Gupta

Reputation: 83

How to change content of a Div on clicking image link?

I am creating a layout with two Columns.

One having images and second content. Now I want, whenever user clicks on image the content in the second column get changed.

HTML

    <div class="col-sm-6">
            <div class="row" style="width: 75%;margin: 0 auto;">
             <div class="col-xs-6">
                <a href="#" class="p1"><span id="image1"><b>Planning</b></span></a>
             </div>
             <div class="col-xs-6">
                <a href="#" class="p2"><span id="image2"><b>Results</b></span></a>         
             </div>
           </div><br>
           <div class="row" style="width: 75%;margin: 0 auto;">
             <div class="col-xs-6">
                <a href="#" class="p3"><span id="image3"><b>Improvements</b></span></a>            
             </div>
             <div class="col-xs-6">
                <a href="#"  class="p4"><span id="image4"><b>Communication</b></span></a>              
             </div>
           </div>
<div class="st">
            <div class="planning">
            <h3>Planning</h3>           
            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
            Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
            making it work for them. </p>   
            </div>  

            <div class="results">
            <h3>Results</h3>            
            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
            Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
            making it work for them. </p>   
            </div>

            <div class="improvements">
            <h3>Improvements</h3>           
            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
            Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
            making it work for them. </p>   
            </div>

            <div class="communication">
            <h3>Communication</h3>          
            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
            Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
            making it work for them. </p>   
            </div>              
          </div>
    <div class="col-sm-6 how-text">

    </div>

CSS

.st { display:none; }
.how-text { min-height: 300px;
    height: auto;
    background-color: #e6ebe4; 
    padding: 20px;
    margin: 25px 0px 10px 0px;
    border-radius: 3px; }

Jquery 

$(document).ready(function() {
   $('.p1').click(function(){
    $('.how-text').html($('.planning').html());
});

    $('.p2').click(function(){
    $('.how-text').html($('.results').html());
});

    $('.p3').click(function(){
    $('.how-text').html($('.improvements').html());
});

    $('.p4').click(function(){
    $('.how-text').html($('.communication').html());
});
});

Try yourself in Fiddle

https://jsfiddle.net/19suymt4/

Upvotes: 2

Views: 921

Answers (3)

Arslan Ahmed
Arslan Ahmed

Reputation: 288

Editted

Here is the easiest way of doing that with 

getElementsByClassName

I changed your code for your understanding

Working Example

Upvotes: 2

Kamuran S&#246;necek
Kamuran S&#246;necek

Reputation: 3333

you can access inside of a div as it has display none. you can use 

.st {height:0;overflow:hidden;}

instead of display:none

https://jsfiddle.net/19suymt4/2/

it can be your solution

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You did not added jquery in your code. Also you can narrow down the 4 click events to single click event:

 $('a').click(function () {
   $('.how-text').html($('.st div:eq('+$('.row > div').index($(this).parent())+')').html());
 });

Working Demo

Upvotes: 0

Related Questions