[SalesForce] how to hide and show the pageblock using jquery in vf page

There are two dimensions to this question, one is the hiding on the UI and the other persisting the hiding (even after a refresh)

To hide on the UI, you can use the jQuery.hide() function, which is trivial.

To persist the hiding, you will need to proxy it via an actionFunction (equally you could use JS-Remoting via Jquery, but I've chosen actionFunction for the purposes of this illustration) to the controller class, so it can process the Id and possibly, set a field on the Account to hide it in further loads. Now if you want a different behaviour per use (i.e. hidden only for the user who has hidden it, then you will possibly need to create another object, where you will store a user's 'hide' preferences, a user Id - hidden id mapping of sorts)

Here's my illustration using Accounts, where I've implemented the hide behaviour using both jQuery and proxying through actionFunction. You can bolt on the behaviour to persist the hiding in the controller action method which is invoked when Hide is clicked.

Visualforce Page :

<apex:page controller="AccountListController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>

jQuery.noConflict();

function proxyHideItem(accId){
//uncomment this to hide via jquery, currently hiding via actionFunction
//jquery selector using the class, which is accountId for each row
//jQuery("."+accId).hide();

hideItem(accId);

}
</script>

<apex:form> //action function proxies to controller,which sets visible false

<apex:actionFunction name="hideItem" action="{!hideAccount}" reRender="thePageBlock">
<apex:param id="paramId" name="accToHide" value="" />
</apex:actionFunction>

<apex:pageBlock id="thePageBlock">
<apex:pageMessages/>

<apex:pageBlockSection>
<apex:dataTable value="{!accountList}" var="acc">

//notice how the styleClass is the accountId, to select using Jquery
<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Hide</b></apex:facet>
<apex:outputPanel onclick="proxyHideItem('{!acc.accId}');" >Hide</apex:outputPanel> 

</apex:column>

<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Id</b></apex:facet>
{!acc.accId}
</apex:column>

<apex:column   styleClass="{!acc.accId}"  rendered="{!acc.Visible}">
<apex:facet name="header"><b>Name</b></apex:facet>
{!acc.accName}
</apex:column>

</apex:dataTable>

</apex:pageBlockSection>

</apex:pageBlock>
</apex:form>

</apex:page>

Controller :

public class AccountListController{

Map<Id, AccountWrapper> accMap = new Map<Id, AccountWrapper>();

public List<AccountWrapper> getAccountList(){
    if (accMap == null || accMap.isEmpty()){
        for(Account acc : [Select Id, Name from Account LIMIT 25]){
            accMap.put(acc.Id, new AccountWrapper(acc));
        } 
    }
    return accMap.Values();
}

//this method is invoked via the action function
public PageReference hideAccount(){

Id accToHide = (Id)ApexPages.currentPage().getParameters().get('accToHide');
System.debug('**************************** Hiding ' + accToHide);
if(accToHide != null)
accMap.get(accToHide).visible = false;

//here is where you can bolt on behaviour to store the account hide event
//either a field on account if hide is global for all users, or a dedicated
//hide object, if the hiding is user specific
return null;
}

//wrapper class to hold the Visible variable, which controls visibility
public class AccountWrapper{

public Account acct {get; set;}

public Id accId {get { return acct.Id ; }}

public String accName {get { return acct.Name ;} }

public boolean visible { get; set; }

public AccountWrapper(Account acc){

this.visible = true;
this.acct = acc;

}
}
}

Do I have to change the j$().text to fit with a checkbox?

This is correct. I went and started to look at the HTML for checkbox and saw it is in fact an image that they are using. What I suggest is to read an attribute from that image such as alt or title as you can see how the HTML looks below

<div id="00N50000003JWbq_ileinner"> <img src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" id="00N50000003JWbq_chkbox" title="Checked"> </div>

This would be the javascript I would have to use to get the value "Checked" as shown below:

j$("#00N50000003JWbq_chkbox").attr('title');

What I'm doing here in the javascript / jquery, is I find the section of html which is holding on the precious information I want to extract, and since it has a child record, I'm using the children() function to go a step deeper inside the html as this is nested within your div container. Lastly, I use the attr() method which allows me to call any attribute as seen above in the html image tag to retrieve a value.

Please remember to use the correct ID as this was an example from my side. Lastly, I would also recommend checking to see if your developer console / firebug / trouble shooting application tells you if you have any errors via javascript.