Display various divs onclick in Javascript -


i have 3 service panels divs use javascript display when 'clicked'.

i posted jsfiddle show full content of panels.

  • make sure jsfiddle on javascript (no wrap - in - ) functions work

i want figure out way write 1 function opens each panel , inner content. eliminate me making new function , #id each panel. 

<!-- panel 1 --> <div class="service-panel" onclick="openservice()">  <!-- panel 2 --> <div class="service-panel" onclick="openservice2()">  <!-- panel 3 --> <div class="service-panel" onclick="openservice3()">   function openservice() { var x = document.getelementbyid('open1'); var y = document.getelementbyid('toggle1'); if (x.style.display === 'none') {     x.style.display = 'block';     y.innerhtml = '-'; } else {     x.style.display = 'none';     y.innerhtml = '+';     y.style.color = '#ffffff';     } }  function openservice2() { var x = document.getelementbyid('open2'); var y = document.getelementbyid('toggle2'); if (x.style.display === 'none') {     x.style.display = 'block';     y.innerhtml = '-'; } else {     x.style.display = 'none';     y.innerhtml = '+';     y.style.color = '#ffffff';     } }

there has got simple solution problem.

https://jsfiddle.net/rrn7fvxt/1/#&togetherjs=jabjddxmdg

here's solution using jquery:

$(function() {    $(".open").hide();    $(".service-panel").click(function() {      $(this).next().toggle();      $(this).data("open", !$(this).data("open"));      $(this).find(".toggle").html($(this).data("open") ? "-" : "+");    });  });
.section-service {    display: block;    position: relative;    width: 100%;    height: 100%;    z-index: 3;  }    .container-service {    margin: 0 auto;    display: block;    width: 100%;    max-width: 1400px;    height: 100%;  }    .service-panel {    margin: 0 auto;    display: block;    width: 90%;    height: 50px;    background-color: #636363;    margin-bottom: 1px;    cursor: pointer;  }    .service-panel:hover {    background-color: #545454;  }    .service-panel-open {    margin: 0 auto;    padding: 30px 0px;    text-align: center;    width: 90%;    height: 100%;    background-color: #ffffff;    margin-bottom: 1px;    cursor: pointer;    transition: 1s;  }      /* images!!!! */    .container-image {    margin: 0 auto;    display: block;    overflow: hidden;    max-width: 1000px;    padding-bottom: 18px;  }    .serimg {    display: inline-block;    margin: 10px;    width: 30%;    float: left;  }    .container-service-text {    margin: 0 auto;    display: block;    overflow: hidden;    width: 98%;  }      /* service text */    #servicename {    margin: 0 auto;    padding-left: 7px;    color: #000000;    width: 100%;    float: left;    text-align: justify;    font-size: 30px;  }    #servicedescription {    margin: 0 auto;    padding-left: 9px;    color: #000000;    width: 92%;    float: left;    text-align: justify;    font-size: 14px;  }    button.reqquotebtn {    display: block;    margin: 0 auto;    width: 158px;    height: 50px;    padding: 14px 32px 14px 32px;    background-color: #58b2c5;    border-radius: 4px;    border: none;    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px 0px;    color: #ffffff;    font-size: 13px;  }    button.reqquotebtn:hover {    background-color: #4ea7bb;    border-bottom: 3px solid rgba(0, 0, 0, 0.5);    cursor: pointer;  }    button.reqquotebtn:focus {    outline: none;  }    {    text-decoration: none;  }    .servicename {    color: #ffffff;    margin: 0px 20px;    float: left;    padding: 14px;  }    .toggle {    float: right;    color: #ffffff;    margin: 0px 20px;    padding: 14px;  }    .containercloseall {    display: block;    padding: 5px 0px 60px 0px;  }    #closeallbtn {    margin: 0 auto;    display: block;    width: 200px;    height: 30px;    background-color: #ffffff;    border: 1px solid #000000;    border-radius: 30px;    margin-top: 10px;    cursor: pointer;    transition: 1s;  }    #closeallbtn:hover {    width: 220px;  }    #closeallbtn:focus {    outline: none;  }    @media screen , (max-width: 400px) {    .serimg {      float: none;      width: 100%;      max-width: 90%;    }  }    @media screen , (max-width: 515px) {    .serimg {      float: none;      width: 100%;      max-width: 350px;    }    .container-service-text {      max-width: 370px;    }  }    @media screen , (max-width: 700px) {    .serimg {      width: 46%;    }    .service-panel {      width: 100%;    }    .service-panel-open {      width: 100%;    }  }    @-webkit-keyframes fadein {    {      opacity: 1;    }  }    @keyframes fadein {    {      opacity: 1;    }  }    .fade-in {    -webkit-animation: fadein .5s ease-in 1 forwards;    animation: fadein .5s ease-in 1 forwards;    opacity: 0;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="section-service" id="services">    <div class="margin">      <div class="container-service">        <!-- panel 1 -->        <div class="service-panel">          <p class="servicename">concrete</p>          <p class="toggle" id="toggle1">+</p>        </div>        <!-- spanel 1 -->        <div class="service-panel-open" id="open1" style="display:none;">          <div class="container-image fade-in">            <div class="container-service-text">              <p id="servicedescription">description placed here first.</p>            </div>          </div>          <a href="#contact">            <button class="reqquotebtn">request quote</button>          </a>        </div>          <!-- panel 2 -->        <div class="service-panel">          <p class="servicename">framing</p>          <p class="toggle" id="toggle2">+</p>        </div>        <!-- spanel 2 -->        <div class="service-panel-open" id="open2" style="display:none;">          <div class="container-image fade-in">            <div class="container-service-text">              <p id="servicedescription">description placed here second.</p>            </div>          </div>          <a href="#contact">            <button class="reqquotebtn">request quote</button>          </a>        </div>        </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more