Creating a basic parts template that hides a detailed view on a mobile phone using an adaptive development framework

Question

I want to use the master-detail template, in which the main master view contains a list of elements, and clicking on it loads all the information associated with this element in a detailed form. This works great using both bootstrap and foundation. I can also hide the detailed view for mobile phones.

What I would like to do is click on an element in the main view. I want to change the view to a detailed view on a mobile device. I think using jquery you can hide the master view and show a detailed view on a mobile device. I’m not sure if this is the right approach, I would like to know how people solved this problem. Any corner / responsive concrete offers would be even better.

Answer 1

My approach would be to make the className your main view be determined by the state contained in the enclosing component. Sort of:

 <MasterView className={this.state.masterViewClass} /> 

(Obviously, it has been modified to fit your code, most likely you will want to apply it to certain tags, and not to the entire responsive element).

When you click on an element of the main view, change its masterViewClass accordingly, using the Responsible Utilities boot files to hide those elements that you do not want to display.