Making a paragraph display when clicking on a link with either CSS or JS

Question

I am trying to create a division that contains a list of features and upgrades on the left side of my page, and a box that contains descriptions of these features on the right side of my page. Basically I'm trying to make it so that when I click (or hover) on one of the features - the text in the box will change to the paragraph about that particular feature.

I don't know if it is best to be trying to use javascript to change the classes of all the descriptions to be 'display: none' except for the one that was clicked on. Or maybe there is an easy way to do it by just adding link tags and classes to all of my list items and using CSS?

Here is my W3schools http://www.w3schools.com/code/tryit.asp?filename=FAXQLP79PMJX - I'm basically trying to make it so that when I click on the item 'Real time monitoring, in process' the text that is currently in the grey box would appear. But if I click on a different item, that text would disappear and a new description would appear.

I tried looking at other similar questions here but they all seem to work when the hover/clickable item is the parent of the item that you want to appear - which is not the case here. Thanks

EDIT: Here is a short version of the list followed by the division in which I would like the text to appear

<div>  
               <p>Standard Features</p>
               <ul>
                <li>Real time monitoring, in process</li>
                <li>High speed, 1st order analysis</li>
                <li>Robust design</li>
                <li>Non-intrusive (Excludes B-Series)</li>
                <li>Withstand corrosive environments</li>
                <li>National Instruments Labview platform</li>
                </ul>
</div>
               <p class="ms_item_header">Click on a feature to learn more</p>
               <p class = "ms_item_001">Display this when they click on the first feature</p>
               <p class = "ms_item_002">Display this instead when they click on the second feature</p>
<div>
</div>

Answer 1

Try this example

$(document).ready(function(){
$('.clickButtons').click(function() {
  $("p.textC").attr('style','display:none;')
     var index = $("li").index(this); $("p.textC").eq(index).attr('style','display:block;')

});
});

p#blueOne{
  color:blue;
}
p#redOne{
  color:red;
  display:none;;
}
.textC{
  top:5px;
}
.clickButtons{
  cursor:pointer;
}
.textCon{
  position:relative;
  border:1px solid black;
  height:100px;
  padding:0 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class="clickButtons">Item 1</li>
    <li class="clickButtons">Item 2</li>
    </ul>
  <div class="textCon">
  <p id="blueOne" class="textC">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed</p>
    <p id="redOne" class="textC">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p>
  </div>
  </div>