We Keep Coding

framework7 not showing tab 1 on load

I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>

Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.

How to hide clicked element when all having same parent class

How to hide caption of particular slide which user clicked. Here having same class name for all the slides is making big problem. How to over come this.
<div id="accordion-wrapper">
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider1.jpg" />
<div class="caption">
<p> 1</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider2.jpg" />
<div class="caption">
<p> 2</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider3.jpg" />
<div class="caption">
<p> 3</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider4.jpg" />
<div class="caption">
<p> 4</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider5.jpg" />
<div class="caption">
<p> 5</p>
</div>
</div>
</div>

$(".slide").click(function(){
$(this).find(".caption").hide();
})

Fullpage.js sections not working

I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});

Search within site and return items based on location

html want to show items based on the location in .offer_miliage
<div class="offer_list clearfix">
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_01.jpg" alt=""/>
</div>
<div class="offer_aside">
<h2>Project 1</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">32.690</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_02.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 2</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">56.300</div> <span class="offer_miliage">Choolaimedu</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_03.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 3</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">47.000</div> <span class="offer_miliage">T Nangar</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_04.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 4</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">26.750</div> <span class="offer_miliage">Pallavaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_05.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 5</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">33.300</div> <span class="offer_miliage">Tambaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_06.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 6</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">44.300</div> <span class="offer_miliage">fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_07.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 7</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">48.500</div> <span class="offer_miliage">Fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_08.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 8</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">63.300</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
</div>
<div class="widget-container widget_adv_filter">
<h3 class="widget-title">ADJUST SEARCH RESULTS</h3>
<form action="#" method="get" class="side_form">
<div class="row field_select" style="z-index:8">
<label class="label_title">Location:</label>
<select class="select_styled white_select" name="car_year" id='select'>
<option value="1">Pallavaram</option>
<option value="2">T Nagar</option>
<option value="3">Nungambakkam</option>
<option value="4">Choolaimedu</option>
<option value="5">Fort</option>
</select>
</div>
<div class="row rowSubmit"> <span class="btn btn_search"><input type="submit" value="SEARCH" onClick="go_button();"></span>
</div>
how to show items which are having same location when click in searched button. I have started java script but couldn't advance.
here is java script
<script type="text/javascript">
function go_button(){
var loc=document.getElementByClassName('offer_miliage')[0].innerText;
if(document.getElementById('select').value==1){
//what to write to update .offer_list with .offer_item that
//have .offer_miliage text pallavaram
}
};
</script>
friend can u please tell me whats wrong with this script
function go_button(){
if(document.getElementById('select').value==1){
$(function() {
$(".offer_item").search(function(a) {
// Find the location name from element
var priceAText = $(a).find(".offer_miliage").text();
// Return the result
if(priceAText=="Pallavaram"){return true;}
}).each(function() {
// Add all the elements back into the parent, in order
$(this).appendTo(".offer_list");
});
});
}
};

Your working example with jQuery: http://jsfiddle.net/9VQRt/ (highlight found data with red background).
$('body').on('click', '.search_button', function() {
var offerCollection = $('.offer_miliage');
$.each(offerCollection, function(ind, val) {
if($("#select option:selected").text() == val.innerHTML) {
$(this).addClass('red_bg');
}
});
});

Twitter bootstrap accordion collapse function

I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .
Currently both divs can be expanded at the same time.
The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.
Is there an easy way to do this?
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a href="#" data-target="#about" data-toggle="collapse">
<div class="unit red bloat">
<h3>About</h3>
<p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p>
</div>
</a>
</div>
<div class="span4">
<a href="#" data-target="#videos" data-toggle="collapse">
<div class="unit red bloat">
<h3>Videos</h3>
<p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p>
</div>
</a>
</div>
<div class="span4">
<a href="forums/index.php">
<div class="unit grey bloat">
<h3>Forum</h3>
<p>If you think you'd fit in here, click this box and sign up to our forum. </p>
</div>
</a>
</div>
</div><!-- end row -->
<br />
<br />
<div class="row-fluid">
<div class="span12">
<!-- start accord -->
<div id="about" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>about</p>
</div>
</div>
</div>
<div id="videos" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>vid</p>
</div>
</div>
</div>
<!-- end accord -->
</div>
</div>
<hr><!-- Bottom border -->
</div> <!-- /container -->

I was able to make it work by following the bootstrap example. Had to use the data-parent tag instead of data-target.
Here is the working example;
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="unit grey bloat">
<h3>Heading 1</h3>
<p>Paragraph 1</p>
</div>
</a>
</div>
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="unit grey bloat">
<h3>Heading 2</h3>
<p>Paragraph 2</p>
</div>
</a>
</div>
<div class="span4">
<a href="#">
<div class="unit grey bloat">
<h3>Heading 3</h3>
<p>Paragraph 3</p>
</div>
</a>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 1</p>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->