I'm a beginner in Typescript and I want to incorporate the following JavaScript functionality into a Typescript file.
$('.toggler').live('click', function() {
var idname = $(this).attr('name');
$('.content').hide();
$('#' + idname).show();
});#box {
border: 1px solid gray;
background-color: #f3f3f3;
-webkit-transition: all 1s linear;
}
.content {display:none}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div>
<button class="toggler" name="content1">content 1</button>
<button class="toggler" name="content2">content 2</button>
<button class="toggler" name="content3">content 3</button>
</div>
<div id="box">
<div id="content1" class="content">
Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo.
</div>
<div id="content3" class="content">
Cras dictum. Maecenas ut turpis....consectetuer.
</div>
<div id="content2" class="content">
Cras dictum. Maecenas ut...
Cras ultricies placerat eros. Quisque odio eros, feugiat non, iaculis nec, lobortis sed, arcu. Pellentesque....
</div>When toggling the button, I would like certain elements to appear or disappear accordingly. My main question is how to achieve this kind of JavaScript behavior with Typescript? I've searched extensively but haven't found a clear answer yet. So... What's the best approach, importing a JavaScript file into Typescript or implementing the function directly as Typescript? Also, are there any examples of DOM manipulation with Typescript?