martinpolley

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

martinpolley

<script>
    $(document).ready(function(){
        $('#cb').on('change', function(){
            $('#mobile_container').slideToggle();
        });
    });
</script>

martinpolley

<form>
    <div class="row">
        <div class="medium-8 medium-offset-2 columns">
            <p class="fake">(Other form stuff goes here.)</p>
            <div class="row">
                <div class="small-12 columns">
                    <input type="checkbox" id="cb" name="cb">
                    <label for="cb">Yes! Please text me your special offers.</label>
                </div>
            </div>

martinpolley

<script>
    $(document).ready(function(){
        $('#cb').on('change', function(){
            $('#mobile_container').toggle();
        });
    });
</script>

martinpolley

<style>
    p.fake {
        font-style: italic; 
        margin: 3rem 0 2rem; 
        color: #cccccc;
    }

    div#mobile_container {
        display: none;
    }

martinpolley

    <form>
        <div class="row">
            <div class="medium-8 medium-offset-2 columns">
                <p class="fake">(Other form stuff goes here.)</p>
                <div class="row">
                    <div class="small-12 columns">
                        <input type="checkbox" id="cb" name="cb">
                        <label for="cb">Yes! Please text me your special offers.</label>
                    </div>
                </div>

martinpolley

<script>
    $(document).ready(function(){
        $('#cb').on('change', function(){
            $('#mobilelabel').toggleClass('disabled');
            var checked = !$('#cb').is(':checked');
            $('#mobile').prop('disabled', checked);
        });
    });
</script>

martinpolley

<style>
    p.fake {
        font-style: italic; 
        margin: 3rem 0 2rem; 
        color: #cccccc;
    }

    label.disabled {
      color: #cccccc;   
    }

martinpolley

<form>
    <div class="row">
        <div class="medium-8 medium-offset-2 columns">
            <p class="fake">(Other form stuff goes here.)</p>
            <div class="row">
                <div class="small-12 columns">
                    <input type="checkbox" id="cb" name="cb">
                    <label for="cb">Yes! Please text me your special offers.</label>
                </div>
            </div>

martinpolley

<div class="medium-5 medium-push-1 columns">
    <img src="http://via.placeholder.com/500&text=Photo+1"/>
</div>
<div class="medium-1 medium-pull-5 columns">
    <img src="http://via.placeholder.com/93&text=1"/>
    <img src="http://via.placeholder.com/93&text=2"/>
    <img src="http://via.placeholder.com/93&text=3"/>
</div>