CODEWITHSUNDEEP
javascriptjqueryhtmlcss
syrkull
syrkull

Reputation: 2344

let the user chose how to display the table

I have a table and I want the user to pick how to view the table WITHOUT going to another url .. I want it all to be done by javascript and jquery

there is two types of view one is with pictures, the other is without pictures

the code for the the one with pictures is :

<ul>
<li style="float:right;"><img src="{$pictureurl}"/></li>
<li> {$sometext}</li>
<li>{$sometext}</li>
<li>{$sometext}</li>   
</ul>

and the code for the non picture looks something like this :

<table>
<tr>
<th>{sometext}</th>
<th>{sometext}</th>
<th>{sometext}</th>
</tr>
<tr>
<td >{$sometext}</td>
<td >{$sometext}</td>
<td >{$sometext}</td>
</tr>
</table>

I am going to create to buttons one for the first view and one for the second view.. the problem is I do not know how to change the content from one to another.. is their a code that does this? what is it? and how to use it?

Thanks in advance for helping me :)

Upvotes: 0

Views: 82

Answers (3)

Mahdi jokar
Mahdi jokar

Reputation: 1267

you have to assign an id for your table and then you can call this jquery :

   $("[Your Table ID]  img").css("displaye":"none");

you can use toggle to show you picture again:

 $("#btn").toggle(function(){$("[Your Table ID]  img").css("displaye":"none");};function(){$("[Your Table ID]  img").css("displaye":"inline");});

Upvotes: 1

methyl
methyl

Reputation: 3312

You can do something like this: fiddle

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Wrap your content a DIV, then change the visibility of the DIV.

<div id="photos" style="display:none">   <-- this one starts off hidden
...your content..
</div>

<div id="nophotos">    <-- this one starts off visible
...your content..
</div>

<input type="button onclick="showPhotos()" value="show photos">
<input type="button onclick="hidePhotos()" value="hide photos">

JS:

function showPhotos() {
       $('#photos').show()
       $('#nophotos').hide()  
}

function hidePhotos() {
       $('#photos').hide()
       $('#nophotos').show()  
}

Upvotes: 1

Related Questions