Clicking on the "setActiveViewChild" button will change the active view to the third child.
( See JS tab )
<p>Clicking on the "setActiveViewChild" button will change the active view to the third child. <br>( See JS tab )</p>
<ch5-triggerview id="demo">
<ch5-triggerview-child>
<div class="viewcontent">
<h1>First View</h1>
</div>
</ch5-triggerview-child>
<ch5-triggerview-child>
<div class="viewcontent">
<h1>Second View</h1>
</div>
</ch5-triggerview-child>
<ch5-triggerview-child id="third-child">
<div class="viewcontent">
<h1>Third View</h1>
</div>
</ch5-triggerview-child>
</ch5-triggerview>
<br>
<ch5-button id="button" label="setActiveViewChild"></ch5-button>
var demo = document.getElementById('demo');
var button = document.getElementById('button');
var thirdChild = document.getElementById('third-child');
button.addEventListener('click', function() {
demo.setActiveViewChild(thirdChild);
});
.viewcontent {
width:100%;
height:200px;
background: #999;
display: table;
}
.viewcontent h1 {
text-align: center;
vertical-align: middle;
display:table-cell;
}