Change div content based on id in another div

Question

I'm trying to achieve tabbed content where it's content will change based on the id of the selected tab.

Runthrough :

There are two item 's (two tabs)
I'm running the item container through a for loop . so for every new tab created, a new item div will be generated.
In the for loop I'm running id="{{ loop.index }}" data-id="{{ loop.index }}" . So it will iterate through each item and give it an id. Ie if there's one item , it will have the id of 1, two items and they'll be two item divs with the ID's 1 and 2.
Based on which item is clicked, I want to select the content within it and show it in .text-container .

For demo purposes, I've duplicated item , since my original code is in HUBL (HubSpot language).

 jQuery('.tabbed__images.item').click(function() { jQuery('.tabbed__images .line').css('background-color', 'rgb(193,231,255)'); jQuery(this).find('.line').css('background-color', 'rgb(58,124,166)'); jQuery('.tabbed__images .text-container').html(jQuery(this).find('.description').html()); jQuery('.tabbed__images .img-container').html(jQuery(this).find('.image').html()); });

 .tabbed__images { height: 100%; padding: 0; border-radius: 15px; } .tabbed__images .container { background-color: #f0f3f4; } .tabbed__images .select-container .item { height: 3em; padding: 1em; display: block; text-align: center; cursor: pointer; } .tabbed__images .select-container .item .line { width: 100%; height: 0.4em; margin-top: 0.4em; background-color: #c1e7ff; -webkit-transition: background-color 0.25s; transition: background-color 0.25s; border-radius: 15px; } .tabbed__images .text-container { width: 100%; height: 6em; margin-top: 5em; padding: 1em; font-size: 1.75rem; }

 <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <div class="hidden-xs container container-custom tabbed__images"> <div class="container container__narrow"> <div class="select-container"> <!-- original HUBL --> <!--{% for item in module.tab_1 %} <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}"> <div class="text">{{ item.tab_header }}</div> <div class="line"></div> <div class="hidden description">{{ item.tabbed_text }}</div> </div> {% endfor %}--> <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}"> <div class="text">Tab 1</div> <div class="line"></div> <div class="hidden description">Text of tab 1</div> </div> <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}"> <div class="text">Tab 2</div> <div class="line"></div> <div class="hidden description">Text of tab 2</div> </div> </div> <!-- show content here --> <p class="text-container">This text here will be replaced</p> </div> </div>

How can I get the hidden description to appear in text-container on tab click? Ie if I click Tab 2 , text-container will read Text of tab 2 .

Answer 1

Just change the text of the paragraph on click of the div. Find the text of it's sibling div using the function siblings()

 $('.text').click(function(){
    $('.text-container').html($(this).siblings(".hidden_description").html());
    })

 jQuery('.tabbed__images.item').click(function() { jQuery('.tabbed__images .line').css('background-color', 'rgb(193,231,255)'); jQuery(this).find('.line').css('background-color', 'rgb(58,124,166)'); jQuery('.tabbed__images .text-container').html(jQuery(this).find('.description').html()); jQuery('.tabbed__images .img-container').html(jQuery(this).find('.image').html()); }); $('.text').click(function(){ $('.text-container').html($(this).siblings(".hidden_description").html()); })

 .tabbed__images { height: 100%; padding: 0; border-radius: 15px; } .tabbed__images .container { background-color: #f0f3f4; } .tabbed__images .select-container .item { height: 3em; padding: 1em; display: block; text-align: center; cursor: pointer; } .tabbed__images .select-container .item .line { width: 100%; height: 0.4em; margin-top: 0.4em; background-color: #c1e7ff; -webkit-transition: background-color 0.25s; transition: background-color 0.25s; border-radius: 15px; } .tabbed__images .text-container { width: 100%; height: 6em; margin-top: 5em; padding: 1em; font-size: 1.75rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <div class="hidden-xs container container-custom tabbed__images"> <div class="container container__narrow"> <div class="select-container"> <!-- original HUBL --> <!--{% for item in module.tab_1 %} <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}"> <div class="text">{{ item.tab_header }}</div> <div class="line"></div> <div class="hidden description">{{ item.tabbed_text }}</div> </div> {% endfor %}--> <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}"> <div class="text">Tab 1</div> <div class="line"></div> <div class="hidden_description">Text of tab 1</div> </div> <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}"> <div class="text">Tab 2</div> <div class="line"></div> <div class="hidden_description">Text of tab 2</div> </div> </div> <!-- show content here --> <p class="text-container">This text here will be replaced</p> </div> </div>

Change div content based on id in another div

Question

1 answers

solution1
0 2019-02-26 08:45:21

Change div content based on id in another div

Question

1 answers

solution1 0 2019-02-26 08:45:21

solution1
0 2019-02-26 08:45:21