Skip to content

Instantly share code, notes, and snippets.

@j0x0j

j0x0j/Wapa Idol Mobil Homepage JS

Created May 22, 2012 15:31
Show Gist options
  • Save j0x0j/2769772 to your computer and use it in GitHub Desktop.
Save j0x0j/2769772 to your computer and use it in GitHub Desktop.
Download ZIP
Index Wapa Idol Mobil JS
Raw
Wapa Idol Mobil Homepage JS
$(document).ready(function(){
   
    $('.plusarrow').onclick(function(){
         expand();
    });
   
    $('.minusarrow').onclick(function(){
         collapse();
    });
   
});
function expand() {
   $('.hidden_content').show();
   $('.plusarrow').hide();
   $('.minusarrow').show();
}
function collapse() {
   $('.hidden_content').hide();
   $('.plusarrow').show();
   $('.minusarrow').hide();
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Wapa Mobil</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="maximum-scale=1.0">
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/swipe.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
</head>
<body>
<div id="page">
<header>
<div class="top">
<p class="date">Lunes & Viernes 9:00 pm</p>
<div class="logo"></div>
</div>
<div id="slider">
<ul>
<li style="display: block">
<a href="#">
<img src="assets/images/fpo_1.jpg" width="320" height="125" alt="#"/>
</a>
</li>
<li style="display: none">
<a href="#">
<img src="assets/images/fpo_1.jpg" width="320" height="125" alt="#"/>
</a>
</li>
</ul>
</div>
</header>
<div id="content">
<div class="top_results">
<ul>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
<button class="play_btn"><a href="#"></a></button>
</li>
<li style="margin: 0 5px;">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
<button class="play_btn"><a href="#"></a></button>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
<button class="play_btn"><a href="#"></a></button>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
<button class="play_btn"><a href="#"></a></button>
</li>
<li style="margin: 0 5px;">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
<button class="play_btn"><a href="#"></a></button>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
<button class="play_btn"><a href="#"></a></button>
</li>
</ul>
</div>
<div class="nav">
<ul>
<li>
<a href="#">Videos</a>
<div class="plusarrow"></div>
<div class="minusarrow"></div>
<div class="hidden_content">
<ul>
<li>
<div class="img_col">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<button class="play_btn"></button>
</div>
<div class="text_col">
<p class="title"><span style="color:#27AAE1 ">VIDEO:</span> Top 7 Results</p>
<p>Idol Albums James Duch and Jennifer Hudson returned...</p>
</div>
</li>
<li>
<div class="img_col">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<button class="play_btn"></button>
</div>
<div class="text_col">
<p class="title"><span style="color:#27AAE1 ">VIDEO:</span> Top 7 Results</p>
<p>Idol Albums James Duch and Jennifer Hudson returned...</p>
</div>
</li>
<li style="border: none;">
<div class="img_col">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<button class="play_btn"></button>
</div>
<div class="text_col">
<p class="title"><span style="color:#27AAE1 ">VIDEO:</span> Top 7 Results</p>
<p>Idol Albums James Duch and Jennifer Hudson returned...</p>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Galería</a>
<div class="plusarrow"></div>
<div class="minusarrow"></div>
<div class="hidden_content">
<div class="galeria">
<ul>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li style="margin: 0 5px 5px 5px;">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li style="margin: 0 5px 5px 5px;">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Noticias</a>
<div class="plusarrow"></div>
<div class="minusarrow"></div>
<div class="hidden_content">
<div class="noticias">
<ul>
<li>
<div class="img_col">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
</div>
<div class="text_col">
<p class="title">Top 7 Results</p>
<p>Idol Albums James Duch and Jennifer Hudson returned...</p>
</div>
</li>
<li>
<div class="img_col">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
</div>
<div class="text_col">
<p class="title">Top 7 Results</p>
<p>Idol Albums James Duch and Jennifer Hudson returned...</p>
</div>
</li>
<li style="border: none;">
<div class="img_col">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
</div>
<div class="text_col">
<p class="title"><Top 7 Results</p>
<p>Idol Albums James Duch and Jennifer Hudson returned...</p>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Participantes</a>
<div class="plusarrow"></div>
<div class="minusarrow"></div>
<div class="hidden_content">
<div class="participantes">
<ul>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li style="margin: 0 5px 5px 5px;">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li style="margin: 0 5px 5px 5px;">
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
<li>
<img src="assets/images/fpo_2.jpg" width="100" height="62" alt="#"/>
<div class="title">
<p>Top 7 Results</p>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<footer>
<p>Terminos y condiciones:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam purus elit, vulputate id varius non, volutpat ac lorem</p>
</footer>
</div>
<script>
window.mySwipe = new Swipe(
document.getElementById('slider')
);
</script>
</body>
</html>
@j0x0j
Copy link
Author

j0x0j commented May 22, 2012

this should be all you need

$(document).ready(function(){

 $('.plusarrow').onclick(function(){
     $(this).hide();
     $('.minusarrow').show();
     $(this).closest('.hidden_content').show();
 });

 $('.minusarrow').onclick(function(){
     $(this).hide();
     $('.plusarrow').show();
     $(this).closest('.hidden_content').hide();
 });

});

@j0x0j
Copy link
Author

j0x0j commented May 22, 2012

$(document).ready(function(){

$('.plusarrow').onclick(function(){
$(this).hide();
$(this).closest('.minusarrow').show();
$(this).closest('.hidden_content').show();
});

$('.minusarrow').onclick(function(){
$(this).hide();
$(this).closest('.plusarrow').show();
$(this).closest('.hidden_content').hide();
});
});

@j0x0j
Copy link
Author

j0x0j commented May 22, 2012

$(document).ready(function(){

$('.plusarrow').click(function(){
$(this).hide();
$(this).parent().find('.minusarrow').show();
$(this).parent().find('.hidden_content').show();
});

$('.minusarrow').click(function(){
$(this).hide();
$(this).parent().find('.plusarrow').show();
$(this).parent().find('.hidden_content').hide();
});
});

@j0x0j
Copy link
Author

j0x0j commented May 22, 2012

$(document).ready(function(){

$('.plusarrow').click(function(){
$(this).hide();
$(this).parent().find('.minusarrow').show();
$('.hidden_content').hide();
$(this).parent().find('.hidden_content').show();
});

$('.minusarrow').click(function(){
$(this).hide();
$(this).parent().find('.plusarrow').show();
$('.hidden_content').hide();
$(this).parent().find('.hidden_content').hide();
});
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment