[JQuery] Show/Hide fa uno scatto, da impazzire..

[AltF4]

Buonasera a tutti, sto impazzendo cercando di risolvere un problema con uno script JQuery per visualizzare un determinato contenuto al click del mouse e nasconderlo ad un eventuale nuovo click.

In pratica quando clicco sulla parola che fa aprire il contenuto nascosto (es. LEGGI), nell'aprirsi fa uno scatto verso il basso ed una volta aperto tutto fa un altro scatto verso l'alto (di circa 10px), lo stesso se clicco per chiudere.

Ho notato che se nel contenuto nascosto inserisco un tag

fa questo "difetto", mentre se non inserisco tag

non sembra riscontrarsi il problema.

Qualcuno può aiutarmi?

Questo inserisco prima della chiusura del tag HEAD:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="showhidescript/showHide.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){


   $('.show_hide').showHide({			 
		speed: 1000,  // speed you want the toggle to happen	
		easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
		changeText: 0, // if you dont want the button text to change, set this to 0
		showText: '',// the button text to show when a div is closed
		hideText: '' // the button text to show when a div is open
					 
	}); 


});

</script>

<style>
		#leggi{display:none;}
</style>

Questo il codice JS

(function ($) {
    $.fn.showHide = function (options) {

		//default vars for the plugin
        var defaults = {
            speed: 1000,
			easing: '',
			changeText: 0,
			showText: 'Show',
			hideText: 'Hide'
			
        };
        var options = $.extend(defaults, options);

        $(this).click(function () {	
           
             $('.toggleDiv').slideUp(options.speed, options.easing);	
			 // this var stores which button you've clicked
             var toggleClick = $(this);
		     // this reads the rel attribute of the button to determine which div id to toggle
		     var toggleDiv = $(this).attr('rel');
		     // here we toggle show/hide the correct div at the right speed and using which easing effect
		     $(toggleDiv).slideToggle(options.speed, options.easing, function() {
		     // this only fires once the animation is completed
			 if(options.changeText==1){
		     $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
			 }
              });
		   
		  return false;
		   	   
        });

    };
})(jQuery);

Questo invece inserisco nel tag BODY:

Leggi

<div id="leggi">


prova testo prova testo prova testo</p>

</div>

Ho provato a cercare anche sul web, ma non sono riuscito a trovare nulla...

[Xinod]

il tuo

probabilmente ha dei margini, convertili in padding

[AltF4]

Originariamente inviato da Xinod
il tuo

probabilmente ha dei margini, convertili in padding

Consigli di impostare margin = 0 e padding = 0 per il tag

in generale?

O vuol dire qualcos'altro "convertili in padding"?

Ti ringrazio!

[Xinod]

che se avevi
margin:10px;
padding:0;
diventa
margin:0;
padding:10px;

[AltF4]

Non avevo impostato nulla per il tag

, ora in tutto il sito ho messo margin: 0 e padding 10px, sembrerebbe funzionare e naturalmente ti ringrazio!!!

Comunque mai impostato dei valori per il tag

, non mi ero minimamente preoccupato che potesse essere questo il problema, in quanto ho realizzato altri lavori senza alcuna impostazione per

e questo scatto non lo fa.

E' strano, molto strano.

Ti ringrazio ancora ci mancherebbe!!!