CODEWITHSUNDEEP
javascriptjqueryhtml
Pradeep Kumar V
Pradeep Kumar V

Reputation: 23

How to simplify the following Script to make it easier to write HTML?

I have used the below code for toggling between selection. But the Script I have used is simple so I need to write more in HTML to hide the other tabs as you can see in the code. Help me with the Script to simplify the HTML part. 

function showStuff(id) {
  var id1 = id.replace(/[^\w\s]/gi, '');
  document.getElementById(id).style.display = "block";
  document.getElementById(id1).classList.add('active');
}

function hideStuff(id) {
  var id1 = id.replace(/[^\w\s]/gi, '');
  document.getElementById(id).style.display = "none";
  document.getElementById(id1).classList.remove('active');
}
div.container {
  padding: 7px;
  height: 100%;
  width: 80%;
  margin: 0 auto;
}
<body>
  <div class="container">
    <ol>
      <li id="tabs1" onclick="showStuff('tabs-1'); hideStuff('tabs-2'); hideStuff('tabs-3');hideStuff('tabs-4'); hideStuff('tabs-5');hideStuff('tabs-6'); hideStuff('tabs-7');hideStuff('tabs-8'); hideStuff('tabs-9');hideStuff('tabs-10'); hideStuff('tabs-11');hideStuff('tabs-12'); hideStuff('tabs-13');hideStuff('tabs-14'); hideStuff('tabs-15');hideStuff('tabs-16');hideStuff('tabs-17');hideStuff('tabs-18');hideStuff('tabs-19');">selet A</li>
      <li id="tabs2" onclick="hideStuff('tabs-1'); showStuff('tabs-2'); hideStuff('tabs-3');hideStuff('tabs-4'); hideStuff('tabs-5');hideStuff('tabs-6'); hideStuff('tabs-7');hideStuff('tabs-8'); hideStuff('tabs-9');hideStuff('tabs-10'); hideStuff('tabs-11');hideStuff('tabs-12'); hideStuff('tabs-13');hideStuff('tabs-14'); hideStuff('tabs-15');hideStuff('tabs-16');hideStuff('tabs-17');hideStuff('tabs-18');hideStuff('tabs-19');">select B</li>
    </ol>
  </div>
  <div style="display: table-cell; width: 1%; "></div>
  <div id="tabs-1">
    <h1>A is selected</h1>
    <textarea onclick="this.focus(); this.select();" readonly="readonly">
this is example and A is selected
</textarea>
  </div>
  <div id="tabs-2" style="display : none">
    <h1>B is selected:</h1>
    <textarea onclick="this.focus();this.select()" readonly="readonly">
Another example for b is selected

</textarea></div>
</body>

Also, I need to get the textarea content from a text file (stored with in server)or by any other means so I can avoid that lengthy part to be added with in the code. Is there a way to replace textarea with text file??

Upvotes: 0

Views: 87

Answers (1)

Naitik Kundalia
Naitik Kundalia

Reputation: 309

For Show and hide you can hide and unhide using same function.

Suppose you have :

<ol>
    <li id="tabs1" class="tabheader" onclick="setActive()" data-id="tab1">selet A</li>
    <li id="tabs2" class="tabheader" onclick="setActive()" data-id="tab2">select B</li>
</ol>
<div id="tab1" class="tabcontent">
<!--Your content-->
</div>
<div id="tab2" class="tabcontent">
<!--Your content-->
</div>

you can use following jquery code :

$(".tabheader").click(function(){
    $(".tabcontent").hide();
    $("#"+$(this).data("id")).show();
});

To write inside the textarea from file server side you can use PHP or any other language which read file and put inside textarea. For that you can use file read function and call it between textarea.

Upvotes: 1

Related Questions