javascript - Filling a Div with Content -

i'm making small page has div of defined size of content set not displayed.

above div list of p tags act "links" change content of div when clicked. however, can't seem work.

html

<p id="link1">content 1</p> <p id="link2">content 2</p> <p id="link3">content 3</p>  <div class="subcontent"> <div class="hide cont1"> <p>title</p> <p>content 1</p> </div> <div class="hide cont2"> <p>title</p> <p>content 2</p> </div> <div class="hide cont3"> <p>title</p> <p>content 3</p> </div> </div> 

css

.subcontent{     box-sizing: border-box;     border: solid 1px #ddd;     height:300px;     width: 70%;     padding: 0px 15px;     margin-left: 22%;     margin-bottom: 10px;     font-size: 90%; } .hide{     display: none; 

any ideas on best way content 1 appear if #link1 clicked?

also, if content has been displayed 1 click, how can being hidden before new content displayed?

i'm sorry if of ideas i've presented aren't clear - i'm still new of this.

couple of things:

1) need write click handler p elements.

2) extract number clicked element id

3) use extracted number create selector targeting desired div

 $("p[id^=link]").click(function(){   var currentdivshowid=this.id.replace( /[^\d.]/g, '' );   $('.hide').not(".cont"+currentdivshowid).hide();   $(".cont"+currentdivshowid).toggle();  }); 

working demo