Abrir cerrar cambiando imagen

El ejemplo lo pueden ver en mi sidebar.

Hay varias maneras o utilidades para este código.

Lo principal a tener en cuenta es que trabaja con id que tienen que ser siempre distintos, en el ejemplo voy a cambiar por letras pero pueden ser números o palabras siempre distintos.

Veamos primero el código JavaScript el cual tiene que ir puesto arriba de </head>:

<script type="text/javascript">
function togglvku( targetId )
{
var state = 0;
var blockvkuname = "blockvku" + targetId;
var blockvkuimage = "blockvkucollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockvkuname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
    }
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockvkuimage ).src = state ? "http://img29.imageshack.us/img29/8928/menosr.png" :  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYsDbbsTsJgjVv1ZmsQKHoxVX1aeimzoWWQ8dfsS2vt88GjGhN9B6zbItiinZePWXaWg1F3_YJpwDLGUyH09y1KVXEQsvKIfzkmkhJzJkvIMGpkFGcALIJBydl47pbBgL9dUUEKB8zyhT/s1600/mas.gif";
    }
}
</script>

En color rojo tiene que ir la imagen de menos y en azul la de mas.
Pueden cambiar las imágenes a su gusto por otras o flechas de arriba y abajo.

Una ves puesto el código JavaScript sera colocar el código en donde quieran mostrar o ocultar un contenido, pudiendo ser un texto, imagen, etc..

Veamos un ejemplo en una entrada:


TITULO O ABRIR PARA VER EL CONTENIDO

El código del ejemplo:

<a href="javascript: void(0);" onclick="togglvku(&quot;A&quot;); return false">
<img border="0" id="blockvkucollapseA" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYsDbbsTsJgjVv1ZmsQKHoxVX1aeimzoWWQ8dfsS2vt88GjGhN9B6zbItiinZePWXaWg1F3_YJpwDLGUyH09y1KVXEQsvKIfzkmkhJzJkvIMGpkFGcALIJBydl47pbBgL9dUUEKB8zyhT/s1600/mas.gif" style="margin-right: 5px;" />TITULO O ABRIR PARA VER EL CONTENIDO
</a>
<div id="blockvkuA" style="display: none;">
<img src="http://usuarios.sion.com/pauluk/nik/sobras.JPG" /> </div>

La imagen en este caso es la de mas ya que estamos ocultando el contenido.
La imagen puede ir del lado izquierdo o derecho cambiando  margin-right: 5px; por margin-left: 5px; teniendo que ponerla despues del titulo, lo veremos en otro ejemplo.

Fijarse que lo que hace que se oculte el contenido es style="display: none;" si lo quitamos se mostraria  el contenido pero tendriamos que cambiar la imagen de mas por la de menos. Lo veremos en el proximo ejemplo.
Las Id hay que cambiarlas cada ves que se utilize este sistema.

Ejemplo con contenido a la vista:


TITULO O CERRAR EL CONTENIDO

El código del ejemplo:

<a href="javascript: void(0);" onclick="togglvku(&quot;B&quot;); return false">
<img border="0" id="blockvkucollapseB" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCmSIGsXuxyNDncH_A_AZt81Tr2jyAWk2DCW-zHLJE85MzEPRvjwg5SBuoLdiL6pAZXY1nhe7vJRJw9VpPLphMEKIIsf5Rlc-y4L9wQo9dvqc4WOE0YxYv6Ak9GmxP6FqTlONf3y-6FcNO/s1600/menos.gif" style="margin-right: 5px;" />TITULO O CERRAR EL CONTENIDO
</a>
<div id="blockvkuB">
<img src="http://usuarios.sion.com/pauluk/nik/sobras.JPG" /> </div>

Veamos un ejemplo con la imagen a la derecha:


TITULO O ABRIR PARA VER EL CONTENIDO

El código del ejemplo:

<a href="javascript:  void(0);" onclick="togglvku(&quot;C&quot;); return false">
TITULO O ABRIR PARA VER EL CONTENIDO<img border="0" id="blockvkucollapseC" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYsDbbsTsJgjVv1ZmsQKHoxVX1aeimzoWWQ8dfsS2vt88GjGhN9B6zbItiinZePWXaWg1F3_YJpwDLGUyH09y1KVXEQsvKIfzkmkhJzJkvIMGpkFGcALIJBydl47pbBgL9dUUEKB8zyhT/s1600/mas.gif" style="margin-left: 5px;" />
</a>
<div id="blockvkuC" style="display: none;">
<img src="http://usuarios.sion.com/pauluk/nik/sobras.JPG" /> </div>

BUENO ESPERO QUE SE ENTIENDA CUALQUIER COSA ME DEJAN UN COMENTARIO.


Ahora voy a mostrar para adaptarlo en la sidebar para los gadget.

Solo voy a poner para que queden ocultos ya que con los anteriores ejemplos se tendria que entender como cambiar para que quede a la vista.


Buscamos el gadget que queremos ponerle el efecto.

En Diseño, Edición de HTML hay que Expandir plantillas de artilugios.

En este ejemplo sera el HTML1:
Buscamos en el código de la plantilla(Ctrl+F):

<b:widget id='HTML1' locked='false' title='EL TITULO DEL GADGET SI LO TIENE' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Veremos como agregar el efecto:

<b:widget id='HTML1' locked='false' title='EL TITULO DEL GADGET SI LO TIENE' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->

<a href='javascript: void(0);' onclick='togglvku(&quot;A&quot;); return false'>

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><img border='0' id='blockvkucollapseA' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYsDbbsTsJgjVv1ZmsQKHoxVX1aeimzoWWQ8dfsS2vt88GjGhN9B6zbItiinZePWXaWg1F3_YJpwDLGUyH09y1KVXEQsvKIfzkmkhJzJkvIMGpkFGcALIJBydl47pbBgL9dUUEKB8zyhT/s1600/mas.gif' style='margin-right: 5px;'/><data:title/></h2>
</b:if></a><div id='blockvkuA' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div> </div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Todo lo que esta en azul es lo que hay que agregar.
Para entender aun mas ver y comparar los ejemplos, es muy facil, y no olvidar de cambiar las ID.