Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GunnerAPF

Youtube Show More Button

Por , em Desenvolvimento frontend

Recommended Posts

GunnerAPF    0

GunnerAPF
Postado

Ola

 

Eu tinha tido um problema com esse botão, mas acabei conseguindo resolver, porém caindo em outro. Quando uso o botão mais de uma vez na mesma página só o ultimo funciona e não queria ter que criar uma classe para cada um. 

 <style type="text/css">
 .description {
position: relative;

 }
 .description .description-text {
height: 70px;
overflow: hidden;
 }
 .description.expanded .description-text {
height: auto;
 }

 .description .showhide {
border-radius: 0 0 0 0;
border-width: 0 0 0 0;
cursor: pointer; /* If not in your css reset already */
font-size: 10px;
position: absolute;
width: 213px;
height: 30px;
color: #FFFFFF;
text-align:left;
background:url(img/bt_maisdetalhes_atuacao.png) no-repeat;
 }

 .description .showhide:hover {	
color: #FFFFFF;
 }
 .description .showhide .showhide-text {
background: url(img/down-arrow-hover.png) right no-repeat;
float:right
 }
 .description .showhide:hover .showhide-text {
background-image: url(img/down-arrow-hover.png) right;  
 }

 .description.expanded .showhide .showhide-text {
background: url(img/up-arrow-hover.png) right no-repeat;
 }
 .description.expanded .showhide:hover .showhide-text {
background-image: url(img/up-arrow-hover.png) right;  
 }
 .description-fadeout {
display: block;
   height: 50px;
margin: 0;
z-index: 999;

 }
 </style>

 <!-- END DEMO CSS -->

 <!-- START DEMO JQUERY -->

 <script src="jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
   $(document).ready(function() {
     $('.description .showhide').each(function() {
		var showHideButton = $(this), description = showHideButton.parent(), showHideText = showHideButton.children('span');
		showHideButton.click(function() {
			description.toggleClass('expanded');				
		});
	});
   });
 </script> 

 <!-- END DEMO JQUERY -->

</head>
<body>

     <!-- START DEMO HTML -->

     <div class="description">
       <div class="description-text">
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

         ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<BR><BR></p>
       </div> <!-- description-text -->
       <button class="showhide" type="image" onClick="return false;" ><span class="showhide-text"><span style="margin-left:-10px">MAIS DETALHES SOBRE AUTO-PEÇAS</span></span></button>
     </div> <!-- description -->

     <!-- END DEMO HTML -->


         <!-- START DEMO HTML -->

     <div class="description">
       <div class="description-text">
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

         ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<BR><BR></p>
       </div> <!-- description-text -->
       <button class="showhide" type="image" onClick="return false;" ><span class="showhide-text"><span style="margin-left:-10px">MAIS DETALHES SOBRE AUTO-PEÇAS</span></span></button>
     </div> <!-- description -->

     <!-- END DEMO HTML -->

Desde já agradeço pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

O problema está no modo como posiciona os elementos em CSS. Verifique flutuações e posicionamentos relativos e absolutos.

O botão só funcionará quando o clique ocorrer sobre ele. Para verificar que funcionará, poderá acompanhar o cursor do mouse, que deverá se tornar uma mãozinha.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito